關於axios的一些封裝

關於axios的封裝

應用場景，專案中涉及100個ajax請求，其中：

1.其中60個需要在請求頭header設定tokenheaders:用於許可權校驗;

2.其中20個為上傳excel檔案需要在請求頭中設定content-type;

headers: `
}

上面說的 1、2、3可以在全域性request攔截中進行處理，但是代價極大，需要為這100個介面都做判斷再做相應處理... ；當然也可以不用全域性攔截，為每個介面都單獨定義，我相信有不少同學仍是這樣處理的，但是只要有改動，例如現在我要求所有的請求頭都新增乙個引數，那就只能乙個乙個介面的改.....這不是我們想要的結果，所以我們需要對ajax再封裝！ajax再封裝！ajax再封裝！，因為相當重要，所以要多說幾遍....

③最後20個請求用來獲取檔案流，需要指定接受型別responsetype: 'blob'

需要對全域性發起request進行攔截並做非同步處理（強調：是非同步處理）；

如果你的專案已經做到一半，現在後端要加上token許可權做認證；

封裝其實很簡單，就是對原來真正的ajax套乙個殼，這個殼就是乙個函式！在這個函式裡都幹了些什麼見不得人事呢？幹什麼都可以，上面說的1、 2、 3、 4、 5都可以在這裡悄悄的進行，那對原來的ajax鏈式呼叫有影響嗎？答案是肯定的：沒有影響。先來看看我在**裡呼叫的ajax：

_initeditparams () ).then(res => )
},

this.$axios可以直接呼叫是因為這裡把請求方法之類的配置項全放在封裝裡面進行了。

這裡也是通過vue.prototype.$axios = axios新增到vue全域性例項的，但這裡新增的axios不是直接引入的axios外掛程式，而是乙個方法

import  from './utils/common'
vue.prototype.$axios = axios

當然。也可以不用新增到全域性例項裡面，可以在元件中通過import語法引入使用。當然是專案裡大量使用的封裝方法直接使用vue.prototype新增到vue例項。接下來我們看看axios方法都做了些啥：

import axios from 'axios'
import store from '../vuex'
/*********************************
** fn: axios
** intro: 公用封裝的axios  已在main.js中進行 $axios**
** intro: store.state.permission.consturl 為公用的介面字首位址
** intro: url 方法接受引數 為定義的 介面位址字尾
** intro: data 方法接受引數 為定義的引數
** author: zyx
*********************************/
export function axios (url, data) $`,
method: 'post',
data: data,
headers: 
}).then(res => ).catch(err => )})}

axios的封裝

在目錄下新建乙個axios資料夾，在資料夾下新建檔案axios.js，檔案內容：

關於axios的一些封裝

一些關於使用axios的心得

關於網路協議封裝的一些新想法

晶元封裝的一些資訊

關於axios的一些封裝

一些關於使用axios的心得

關於網路協議封裝的一些新想法

晶元封裝的一些資訊

相關推薦