初识Axios
2019-04-28 本文已影响0人
花泽冒菜
axios是一个基于promise的浏览器端和Node端的HTTP客户端(Promise Based HTTP Client for the Browser And Node.js)。
主要有以下作用:
- 从浏览器端发起XMLHttpRequests
- 从node端发起http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换成JSON数据
- 为客户端提供防止SXRF攻击保护
使用方法
GET请求示例:
const axios = require('axios');
// 请求一个给定id的用户
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// 不管请求成功与否都会执行
});
// 还可以使用以下写法
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 不管请求成功与否都会执行
});
// 还可以配合async/await使用,但要注意浏览器兼容性
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
POST请求示例:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
多个并发请求(concurrent requests)示例:
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) {
// Both requests are now complete
}));
使用方式跟fetch大同小异,详情请见axios的readme文档。