一、axios是什么
??axios 是一個輕量的 HTTP客戶端 基于 XMLHttpRequest 服務來執行 HTTP 請求，支持豐富的配置，支持 Promise，支持瀏覽器端和 Node.js 端。自Vue2.0起，尤大宣布取消對 vue-resource 的官方推薦，轉而推薦 axios。現在 axios 已經成為大部分 Vue 開發者的首選。
特性
- 從瀏覽器中創建
XMLHttpRequests - 從
node.js創建http請求 - 支持
PromiseAPI - 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換
JSON數據 - 客戶端支持防御
XSRF
??實際上，axios可以用在瀏覽器和 node.js 中是因為，它會自動判斷當前環境是什么，如果是瀏覽器，就會基于XMLHttpRequests實現axios。如果是node.js環境，就會基于node內置核心模塊http實現axios
簡單來說，axios的基本原理就是
- axios還是屬于 XMLHttpRequest， 因此需要實現一個ajax。或者基于http 。
- 還需要一個promise對象來對結果進行處理。
基本使用
安裝
// 項目中安裝
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
導入
import axios from 'axios'
發送請求
axios({
url:'xxx', // 設置請求的地址
method:"GET", // 設置請求方法
params:{ // get請求使用params傳參,如果是post請求則用data
name:''
}
}).then(res => {
// res為后端返回的數據
})
二、為什么要封裝
??axios 的 API 很友好，你完全可以很輕松地在項目中直接使用。不過隨著項目規模增大，如果每發起一次HTTP請求，就要把這些比如設置超時時間、設置請求頭、根據項目環境判斷使用哪個請求地址、錯誤處理等等操作，都需要寫一遍。
??這種重復勞動不僅浪費時間，而且讓代碼變得冗余不堪，難以維護。為了提高我們的代碼質量，我們應該在項目中二次封裝一下 axios 再使用。
舉個例子：
axios('http://localhost:3000/data', {
// 配置代碼
method: 'GET',
timeout: 1000,
withCredentials: true, // 當前請求為跨域類型時是否在請求中協帶cookie 需要注意的是當配置了 xhr.withCredentials = true時，必須在后端增加 response 頭信息Access-Control-Allow-Origin，且必須指定域名，而不能指定為*
headers: {
'Content-Type': 'application/json',
Authorization: 'xxx',
},
transformRequest: [function (data, headers) { // 允許在向服務器發送前，修改請求數據
// 對 data 進行任意轉換處理
return data;
}],
transformResponse: [function (data) { // 在傳遞給 then/catch 前，允許修改響應數據
// 對 data 進行任意轉換處理
return data;
}],
// 其他請求配置...
})
.then((data) => {
// todo: 真正業務邏輯代碼
console.log(data);
}, (err) => {
// 錯誤處理代碼
if (err.response.status === 401) {
// handle authorization error
}
if (err.response.status === 403) {
// handle server forbidden error
}
// 其他錯誤處理.....
console.log(err);
});
??如果每個頁面都發送類似的請求，都要寫一堆的配置與錯誤處理，就顯得過于繁瑣了，這時候我們就需要對axios進行二次封裝，讓使用更為便利
