angular——数据交互（get、jsonp、post）

最新推荐文章于 2021-03-11 04:31:55 发布

原创最新推荐文章于 2021-03-11 04:31:55 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

15 篇文章

订阅专栏

这篇博客详细介绍了在Angular中使用HttpClientModule进行GET、POST以及JSONP请求的方法，包括模块引入、服务注入和具体操作步骤。同时，还探讨了如何引入第三方库axios进行全局GET请求的配置和服务封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HttpClientModule 模块

get 方法

在 app.module.ts 中引入 HttpClientModule 模块并注入

import { HttpClientModule } from '@angular/common/http'

imports: [
  HttpClientModule,
],

在用到的地方引入 HttpClient 并在构造函数声明

import { HttpClient } from '@angular/common/http'

export class FunComponent implements OnInit {
  constructor (public http: HttpClient) {}
  
  ngOnInit () {
    this.getCallbackData()
  }
  
  getCallbackData () {
    this.http.get('url', {
      params: {
        name: 'lucy',
      },
    }).subscribe(res => {
      console.log(res)
    })
  }
}

post 方法

在 app.module.ts 中引入 HttpClientModule 模块并注入

import { HttpClientModule } from '@angular/common/http'

imports: [
  HttpClientModule,
],

在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient

import { HttpClient, HttpHeaders } from '@angular/common/http'

export class FunComponent implements OnInit {
  constructor (public http: HttpClient) {}

  ngOnInit () {
    this.getData()
  }

  getData () {
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
    }
    this.http.post('url', { name: 'bob' }, httpOptions).
      subscribe(res => {
        console.log(res)
      })
  }
}

jsonp 方法

在 app.module.ts 中引入 HttpClientModule 模块并注入

import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http'

imports: [
  HttpClientModule,
  HttpClientJsonpModule,
],

在用到的地方引入 HttpClient 并在构造函数声明

import { HttpClient } from '@angular/common/http'

export class FunComponent implements OnInit {
  constructor (public http: HttpClient) {}

  ngOnInit () {
    this.getData()
  }

  getData () {
    // 服务器需要支持 jsonp 方式：http://a.itying.com/api/productlist?callback=xxx
    this.http.jsonp('http://a.itying.com/api/productlist', 'callback').
      subscribe(res => {
        console.log(res)
      })
  }
}

第三方模块 axios

以 service 创建全局 get 请求

创建服务

ng g service services/http

服务中引入并封装

import axios from 'axios'

export class HttpService {
  getData (api) {
    return new Promise(resolve => {
      axios.get(api).then(res => {
        resolve(res)
      })
    })
  }
}

app.module.ts 中配置服务

import { HttpService } from './services/http.service'

providers: [
  HttpService,
],

需要使用的组件内调用服务

// 使用服务里的 axios 获取
import { HttpService } from '../../services/http.service'

export class FunComponent implements OnInit {
  constructor (public http: HttpService) {}

  ngOnInit () {
    this.getData()
  }

  getData () {
    this.http.getData('http://a.itying.com/api/productlist').then(res => {
      console.log(res)
    })
  }
}