当前位置:首页 > Web开发 > 正文

angular 中的 http 请求

2024-03-31 Web开发

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

根模块中 app.module.ts:

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

 

imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

组件中:

import { HttpClientfrom ‘@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 { HttpClientHttpHeaders } 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(apirequestDataheaderOption).subscribe((res)=>{

      console.log("POST请求:"res)

    })

  }

3. jsonp 请求:

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

根模块中:

import { HttpClientModuleHttpClientJsonpModule } from ‘@angular/common/http‘

组件中:

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

/**

   * jsonp 解决跨域

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

   */

  getJsonpData() {

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/8625.html