(生产)axios - 请求接口
2017-06-15 17:55
78 查看
参考:https://www.awesomes.cn/repo/mzabriskie/axios
基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击
//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{ID:12345}
}).then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
}).then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
});
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
axios可以通过配置(
//发送一个`POST`请求
axios({
method:"POST",
url:'/user/12345',
data:{
firstName:"Fred",
lastName:"Flintstone"
}
});
//发送一个`GET`请求(默认的请求方式)
axios('/user/12345')
以下就是请求的配置选项,只有
{
url:'/user',
//default 请求资源的方式
method:'get'
// 如果`url`不是绝对地址,那么`baseURL`将会加到`url`的前面
baseURL:'https://some-domain.com/api/',
//`transformRequest 请求发送到服务器之前对请求的数据做出一些改动, 适用于以下请求方式:`put/post/patch`,必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
transformRequest:[function(data){
return data;
}],
//`transformResponse`选项允许我们在数据传送到`then/catch`方法之前对数据进行改动
transformResponse:[function(data){
return data;
}],
//`headers`选项是需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},
//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
params: {
ID:12345
},
//`paramsSerializer`是一个可选的函数,起作用是让参数(params)序列化
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},
//`data`选项是作为一个请求体而需要被发送的数据,该选项只适用于方法:`put/post/patch`
data {
firstName:"Fred"
},
//`timeout`选项定义了请求发出的延迟毫秒数
timeout:1000,
//`withCredentails`选项表明了是否是跨域请求
withCredentials:false,//default
//返回数据的格式
responseType:'json',//default
//`httpAgent/httpsAgent`定义了当发送http/https请求要用到的自定义代理,/keeyAlive在选项中没有被默认激活
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
//proxy定义了主机名字和端口号,
proxy: {
host:'127.0.0.1',
port: 9000,
auth: {
username:'skda',
password:'radsd'
}
}
}
{
data:{},
status:200,
//从服务器返回的http状态文本
statusText:'OK',
//响应头信息
headers: {},
//`config`是在请求的时候的一些配置信息
config: {}
}
axios 介绍
基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
功能特性
在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击
GET
请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{ID:12345}
}).then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});
POST
请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
}).then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
});
一次性并发多个请求
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
axios可以通过配置(config
)来发送请求
//发送一个`POST`请求
axios({
method:"POST",
url:'/user/12345',
data:{
firstName:"Fred",
lastName:"Flintstone"
}
});
//发送一个`GET`请求(默认的请求方式)
axios('/user/12345')
请求的配置(request config)
以下就是请求的配置选项,只有
url选项是必须的,如果
method选项未定义,那么它默认是以
GET的方式发出请求
{
url:'/user',
//default 请求资源的方式
method:'get'
// 如果`url`不是绝对地址,那么`baseURL`将会加到`url`的前面
baseURL:'https://some-domain.com/api/',
//`transformRequest 请求发送到服务器之前对请求的数据做出一些改动, 适用于以下请求方式:`put/post/patch`,必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
transformRequest:[function(data){
return data;
}],
//`transformResponse`选项允许我们在数据传送到`then/catch`方法之前对数据进行改动
transformResponse:[function(data){
return data;
}],
//`headers`选项是需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},
//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
params: {
ID:12345
},
//`paramsSerializer`是一个可选的函数,起作用是让参数(params)序列化
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},
//`data`选项是作为一个请求体而需要被发送的数据,该选项只适用于方法:`put/post/patch`
data {
firstName:"Fred"
},
//`timeout`选项定义了请求发出的延迟毫秒数
timeout:1000,
//`withCredentails`选项表明了是否是跨域请求
withCredentials:false,//default
//返回数据的格式
responseType:'json',//default
//`httpAgent/httpsAgent`定义了当发送http/https请求要用到的自定义代理,/keeyAlive在选项中没有被默认激活
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
//proxy定义了主机名字和端口号,
proxy: {
host:'127.0.0.1',
port: 9000,
auth: {
username:'skda',
password:'radsd'
}
}
}
请求返回的内容
{
data:{},
status:200,
//从服务器返回的http状态文本
statusText:'OK',
//响应头信息
headers: {},
//`config`是在请求的时候的一些配置信息
config: {}
}
相关文章推荐
- vue开发:axios的post请求接口出现404,但是get则成功
- iOS开发中请求服务器接口返回数据乱码
- 自己动手写一个 iOS 网络请求库(NSURLSession 初探、封装接口、降低耦合、快速文件上传 )
- 前端遇坑记录(三)——axios请求的参数自动拼接到url后面
- springmvc接口ios网络请求
- vue中的所有axios请求都会发送2次,但是第一次不返回数据的原因
- IOS block dispatch_queue 请求 接受数据 block 接口
- Vue——axios基本配置及请求拦截
- 关于axios发送两次请求
- thinkphp5 配置在sae,axios请求出现500的解决方法!
- 浅谈在Vue-cli里基于axios封装复用请求
- ios中使用block回调或代理方式请求网络接口数据(包括网络缓存)
- iOS开发-网络-合理封装请求接口
- iOS开发:GET与POST接口网络请求以及对AFNetworking的二次封装
- 关于vue项目中,axios请求方式,跨域请求的处理
- IOS接口请求传递JSON参数
- IOS接口请求传递JSON参数
- ios--请求接口并解析xml
- IOS接口解析(GET请求)
- iOS - 合理封装网络请求接口