怎樣使用 axios 庫處理 http 請求
最近更新時間 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) {
// 兩個請求現在都執行完成
}));