一,前言
vue1.x时,官方推荐HTTP请求工具是vue-resource,但vue2.0将推荐工具改成了axios
加上Vue2.0之后vue-resource不再更新,所以HTTP请求这部分针对axios进行介绍
axios和vue-resource的使用方式相似,
需要注意:axios接口返回的res并不直接是返回的数据,而是经过axios处理过的json对象。
真正的数据在res.data里中
axios.get(url).then((res)=>{
this.data = res.data
})
下面针对axios开始介绍
二,axios简介
Axios是一个基于promise的HTTP库,可用于浏览器和node.js
功能:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
三,安装
$ npm install axios
四,简单使用
GET请求:
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST请求:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行多个并发请求:
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) {
// 两个请求都执行完成后进入
}));
五,响应结构
请求的响应包含以下信息
{
// data:服务器响应的数据
data: {},
// status:服务器响应的HTTP状态码
status: 200,
// statusText:服务器响应的HTTP状态信息
statusText: 'OK',
// headers:服务器响应的头
headers: {},
// :config:为请求提供的配置信息
config: {}
}
接收到的响应:
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
六,错误处理
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
// Error
console.log('Error', error.message);
}
console.log(error.config);
});
// 使用validateStatus配置选项,自定义HTTP状态码的错误范围。
axios.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // 状态码在大于或等于500时才会 reject
}
})