码迷,mamicode.com
首页 > Web开发 > 详细

angular 中的 http 请求

时间:2019-10-04 13:11:31      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:common   ica   getjson   com   let   sop   not   angular   hit   

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() {
    let url = ‘/search/interface/getrelatequery?word=%E6%99%8B%E6%B1%9F‘
    this.http.jsonp(url‘callback‘).subscribe((res)=>{
      console.log("JSOP 请求数据"res)
    })
  }

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

angular 中的 http 请求

标签:common   ica   getjson   com   let   sop   not   angular   hit   

原文地址:https://www.cnblogs.com/monkey-K/p/11621788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!