axios

axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

在前端框架中的應用也是特別廣泛，不管是vue還是react，都有很多項目用axios作為網(wǎng)絡請求庫。

我在最近的幾個項目中都有使用axios，并基于axios根據(jù)常見的業(yè)務場景封裝了一個通用的request服務。

npm:

$ npm install axios

bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

業(yè)務場景：

全局請求配置。 get,post,put,delete等請求的promise封裝。 全局請求狀態(tài)管理，供加載動畫等使用。 路由跳轉取消當前頁面請求。 請求攜帶token，權限錯誤統(tǒng)一管理。

默認配置

定義全局的默認配置

axios.defaults.timeout = 10000 //超時取消請求axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'axios.defaults.baseURL = process.env.BASE_URL 

自定義配置（非常見業(yè)務場景，僅作介紹）

// 創(chuàng)建實例時設置配置的默認值var instance = axios.create({ baseURL: 'https://api.another.com'});// 在實例已創(chuàng)建后修改默認值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

優(yōu)先級：自定義配置 > 默認配置

請求及響應攔截器

請求攔截器

// 請求列表const requestList = []axios.interceptors.request.use((config) => { //1.將當前請求的URL添加進請求列表數(shù)組 requestList.push(config.url) //2.請求開始，改變loading狀態(tài)供加載動畫使用 store.dispatch('changeGlobalState', {loading: true}) //3.從store中獲取token并添加到請求頭供后端作權限校驗 const token = store.getters.userInfo.token if (token) {  config.headers.token = token } return config}, function (error) { return Promise.reject(error)})

1.請求攔截器中將所有請求的url添加進請求列表變量，為取消請求及l(fā)oading狀態(tài)管理做準備
2.請求一旦開始，就可以開啟動畫加載效果。
3.用戶登錄后可以在請求頭中攜帶token做權限校驗使用。

響應攔截器

axios.interceptors.response.use(function (response) { // 1.將當前請求中請求列表中刪除 requestList.splice(requestList.findIndex(item => item === response.config.url), 1) // 2.當請求列表為空時，更改loading狀態(tài) if (requestList.length === 0) {  store.dispatch('changeGlobalState', {loading: false}) } // 3.統(tǒng)一處理權限認證錯誤管理 if (response.data.code === 900401) {  window.ELEMENT.Message.error('認證失效，請重新登錄！', 1000)  router.push('/login') } return response}, function (error) { // 4.處理取消請求 if (axios.isCancel(error)) {  requestList.length = 0  store.dispatch('changeGlobalState', {loading: false})  throw new axios.Cancel('cancel request') } else {  // 5.處理網(wǎng)絡請求失敗  window.ELEMENT.Message.error('網(wǎng)絡請求失敗', 1000) } return Promise.reject(error)})