angular 中的 http 请求

Posted 2022-12-20 monkey-k

angular 中使用 http 请求的前提，需要引入 httpClientModule 模块

根模块中 app.module.ts：

import  HttpClientModule  from ‘@angular/common/http‘

 

imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

组件中：

import  HttpClient from ‘@angular/common/http‘

 

 constructor(public http: HttpClient)  

 

---

1. GET 请求写法：

getData() 

    let url = ‘/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F‘

    this.http.get(url).subscribe((res: any)=>

      console.log("GET 请求", res)

      this.newsList = res.data.relateQuery

    )

  

2. POST 请求写法：

post 请求必须设置请求头

import  HttpClient, HttpHeaders  from ‘@angular/common/http‘

 

postData() 

    let api = ‘/api/message/readnotice‘

    let requestData = 

      advert_id: ‘212‘

    

    let headerOption =  headers: new HttpHeaders( "Content-Type": ‘application/json‘)

    

    this.http.post(api, requestData, headerOption).subscribe((res)=>

      console.log("POST请求：", res)

    )

  

3. jsonp 请求：

jsonp 请求与前两种不同之处在与，除了引入 httpClientModule 之外，还要引入 HttpClientJsonpModule

根模块中：

import  HttpClientModule, HttpClientJsonpModule  from ‘@angular/common/http‘

组件中：

如果不引入 HttpClientJsonModule , this.http.jsonp 报错

/**

   * jsonp 解决跨域

   * 使用 JSONP 格式请求数据的前提是 后台必须支持 jsonp 请求， 请求的 api 中带有 callBack 或者 cb

   */

  getJsonpData() 

    let url = ‘/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F‘

    this.http.jsonp(url, ‘callback‘).subscribe((res)=>

      console.log("JSOP 请求数据", res)

    )

  

 

---