一、axios是什么

??axios 是一個輕量的 HTTP客戶端 基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求，支持豐富的配置，支持 Promise，支持瀏覽器端和 Node.js 端。自Vue2.0起，尤大宣布取消對 vue-resource 的官方推薦，轉而推薦 axios?，F(xiàn)在 axios 已經(jīng)成為大部分 Vue 開發(fā)者的首選。

特性

• 從瀏覽器中創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 http請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數(shù)據(jù)和響應數(shù)據(jù)
• 取消請求
• 自動轉換JSON 數(shù)據(jù)
• 客戶端支持防御XSRF

??實際上，axios可以用在瀏覽器和 node.js 中是因為，它會自動判斷當前環(huán)境是什么，如果是瀏覽器，就會基于XMLHttpRequests實現(xiàn)axios。如果是node.js環(huán)境，就會基于node內置核心模塊http實現(xiàn)axios

簡單來說，axios的基本原理就是

• axios還是屬于 XMLHttpRequest， 因此需要實現(xiàn)一個ajax。或者基于http 。
• 還需要一個promise對象來對結果進行處理。

基本使用

安裝

// 項目中安裝
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

導入

import axios from 'axios'

發(fā)送請求

axios({        
 url:'xxx',    // 設置請求的地址
 method:"GET", // 設置請求方法
 params:{      // get請求使用params傳參,如果是post請求則用data
   name:''
 }
}).then(res => {  
 // res為后端返回的數(shù)據(jù)
})

二、為什么要封裝

??axios 的 API 很友好，你完全可以很輕松地在項目中直接使用。不過隨著項目規(guī)模增大，如果每發(fā)起一次HTTP請求，就要把這些比如設置超時時間、設置請求頭、根據(jù)項目環(huán)境判斷使用哪個請求地址、錯誤處理等等操作，都需要寫一遍。

??這種重復勞動不僅浪費時間，而且讓代碼變得冗余不堪，難以維護。為了提高我們的代碼質量，我們應該在項目中二次封裝一下 axios 再使用。

舉個例子：

axios('http://localhost:3000/data', {
  // 配置代碼
  method: 'GET',
  timeout: 1000,
  withCredentials: true, // 當前請求為跨域類型時是否在請求中協(xié)帶cookie 需要注意的是當配置了  xhr.withCredentials = true時，必須在后端增加 response 頭信息Access-Control-Allow-Origin，且必須指定域名，而不能指定為*
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) { // 允許在向服務器發(fā)送前，修改請求數(shù)據(jù)
    // 對 data 進行任意轉換處理
    return data;
  }],
  transformResponse: [function (data) { // 在傳遞給 then/catch 前，允許修改響應數(shù)據(jù)
    // 對 data 進行任意轉換處理
    return data;
  }],
  // 其他請求配置...
})
.then((data) => {
  // todo: 真正業(yè)務邏輯代碼
  console.log(data);
}, (err) => {
  // 錯誤處理代碼  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他錯誤處理.....
  console.log(err);
});

??如果每個頁面都發(fā)送類似的請求，都要寫一堆的配置與錯誤處理，就顯得過于繁瑣了，這時候我們就需要對axios進行二次封裝，讓使用更為便利

點擊看下篇如何封裝