怎样使用 axios 库处理 http 请求
Lasted 2020-02-18 19:16:52
Axios 是一个基于 Promise 的 HTTP 库,可以在浏览器和 node.js 中使用。
特性
- 在浏览器中创建 XMLHttpRequests 请求。
- 在 node.js 中创建 http 请求。
- 支持 Promise API。
- 支持注入请求和响应。
- 处理请求和响应数据。
- 取消请求。
- 自动处理 JSON 格式数据。
- 防止 XSRF 攻击。
安装
使用 npm 安装:
npm install axios
使用 bower 安装:
bower install axios
使用 yarn 安装:
yarn add axios
直接使用 CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
案例
执行 GET 请求:
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
注意:async/await 关键字在 ECMAScript 2017 后才支持,一些 IE 浏览器并不支持,使用是要注意。
执行 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) {
// 两个请求现在都执行完成
}));