angular 中的 http 请求
发布时间：2020-12-17 07:06:01 所属栏目：安全 来源：网络整理
导读：angular 中使用 http 请求的前提，需要引入 httpClientModule 模块 根模块中 app.module.ts： import ?{? HttpClientModule ?}? from ? ‘@angular/common/http‘ ? imports:?[ ???? BrowserModule , ???? AppRoutingModule , ?? ?? HttpClientModule ??],
|
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)
????})
??}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |