個人技術總結——Axios使用總結
阿新 • • 發佈:2021-06-28
目錄
作業基本資訊
這個作業屬於哪個課程 | 2021春軟體工程實踐|S班 (福州大學) |
---|---|
這個作業要求在哪裡 | 軟體工程實踐總結&個人技術部落格 |
這個作業的目標 | 從個人技術學習角度和團隊開發技術角度中選擇最擅長的一個相關技術,進行分析描述並總結 |
其他參考文獻 | Axios中文說明 |
技術概述
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
技術詳述
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) { // 兩個請求現在都執行完成 }));
遇到的問題與解決過程
問題
運用axios進行傳送請求後獲取不到資料。
解決過程
基本配置
import axios from 'axios'
// 建立axios例項
const service = axios.create({
baseURL: url,
timeout: 5000,
withCredentials: true // 允許攜帶cookie
})
請求攔截器
service.interceptors.request.use(config => { config.headers.common['token'] = localStorage.getItem(“token”); return config },err => { //請求出錯的處理函式 return Promise.reject(err) })
封裝為函式
export function delBlog(id) {
return request({
url: '/blog',
method: 'delete',
params:{blogId:id}
})
}
總結
- 獲取不到資料時首先檢查url是否正確。
- 對axios設定baseURL方便維護,不易出錯。