Angular 数据请求的实现方法

2023-09-13 04:54:05 302

使用Angular请求数据的时候，需要引入HttpModule模块，如果使用的jsonp模式的话，则需要另外引入JsonpModule模块

import{HttpModule,JsonpModule}from'@angular/http'

然后在当前模块中的imports内进行注册

imports:[
HttpModule,
JsonpModule
],

注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了

import{Http,Jsonp}from'@angular/http'

然后在当前组件的构造函数当中进行注入以后就可以使用了

constructor(privatehttp:Http,privatejsonp:Jsonp){}

使用如下，一个简单的get请求

//进行注入，拿到相对应的方法
constructor(privatehttp:Http,privatejsonp:Jsonp){}
publiclist:any=[]
//请求数据
getData(){
leturl='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
let_this=this
this.http.get(url).subscribe((data)=>{
_this.list=JSON.parse(data['_body'])['result']
console.log(_this.list)
})
}

前台进行渲染即可

get请求数据


{{item.title}}

JSONP请求数据

注意区分与get请求的区别，使用如下

//请求数据
jsonpData(){
leturl='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK'
let_this=this
this.jsonp.get(url).subscribe((data)=>{
_this.list=data['_body']['result']
console.log(_this.list)
})
}

//渲染
jsonp请求数据


{{item.title}}

不同点

请求的url参数结尾必须要添加指定的回调函数名称&callback=JSONP_CALLBACK

请求的方式变为this.jsonp.get(url)

请求后得到的数据格式不统一，需要自行进行调整

POST请求

与GET的请求方式有些许不同，首先需要引入请求头{Headers}

import{Http,Jsonp,Headers}from'@angular/http'

然后来对请求头进行定义，需要先实例化Headers

privateheaders=newHeaders({'Content-Type':'application/json'})

最后在提交数据的时候带上Headers即可

postData(){
leturl='http://localhost:8080/login'
letdata={
"username":"zhangsan",
"password":"123"
}
this.http.post(
url,
data,
{headers:this.headers}
).subscribe((data)=>{
console.log(data)
})
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Angular 数据请求的实现方法

热门推荐

随机推荐