前言
已經有同學提醒了使用
axios.create(),使用axios.create()可以解決下面說的1 、2、3、5點，樓主也建議使用這種方式，既然axios已經提供了這樣的API，那麼也沒必要像本文這種方式實現，有點多此一舉的嫌疑。所以本文在很大程度上已經沒有的意義了，但本文針對特殊情況也是一種好的選擇，例如 第四點 ，可根據自己的業務需求調整。
再封裝AJAX所帶來的好處是你想象不到的! 無論是對於程式碼的高效管理，還是系統的設計...其收益遠遠超出你的想象。
為何需要在封裝
我們先來看看以下應用場景，專案中涉及100個AJAX請求，其中：
- 其中60個需要在請求頭header設定token
headers: {token: token}用於許可權校驗; - 其中20個為上傳EXCEL檔案需要在請求頭中設定Content-Type;
headers: {
'Content-Type': `multipart/form-data; boundary=${data._boundary}`
}
複製程式碼- ③最後20個請求用來
獲取檔案流，需要指定接受型別responseType: 'blob' - 需要對全域性發起request進行攔截並做非同步處理（強調：是非同步處理）；
- 如果你的專案已經做到一半，現在後端要加上token許可權做認證；
上面說的 1、2、3可以在全域性
request攔截中進行處理，但是代價極大，需要為這100個介面都做判斷再做相應處理... ；當然也可以不用全域性攔截，為每個介面都單獨定義，我相信有不少同學仍是這樣處理的，但是只要有改動，例如現在我要求所有的請求頭都新增一個引數，那就只能一個一個介面的改.....這不是我們想要的結果，所以 我們需要對AJAX再封裝！AJAX再封裝！AJAX再封裝！，因為相當重要，所以要多說幾遍....
針對第四種情況，在axios裡面如果對request只能做一些同步操作；做非同步，直接就報錯了... 但這也可以用封裝AJAX來實現！簡直就是黑魔法...厲害厲害...
封裝實現
封裝其實很簡單，就是對原來真正的AJAX套一個殼，這個殼就是一個函式！ 在這個函式裡都幹了些什麼見不得人事呢？幹什麼都可以，上面說的1、 2、 3、 4、 5都可以在這裡悄悄的進行，那對原來的AJAX鏈式呼叫有影響嗎？答案是肯定的：沒有影響。 先來看看我在程式碼裡呼叫的AJAX：
_initEditParams () {
this.$axios('Common/Permission/Get', {Id}).then(res => {
....
....
})
},
複製程式碼是不是直接呼叫AJAX還要簡潔？是的，因為這裡把請求方法之類的配置項全放在封裝裡面進行了。
等一下...這裡使用的
this.$axios方式呼叫的，好像和我使用的沒啥差別嘛... 是的，這裡也是通過Vue.prototype.$axios = axios新增到vue全域性例項的，但這裡新增的axios不是直接引入的axios外掛，而是一個方法
import {axios} 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) {
return new Promise((resolve, reject) => {
Axios({
url: `${Store.state.permission.constUrl}${url}`,
method: 'post',
data: data,
headers: {
token: Store.state.permission.token
}
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
複製程式碼這個方法裡關鍵點就是
Promise！只有Promise能滿足鏈式呼叫。Promise真是個好東西，具體的Promise語法我就不再這裡說明了，因為說了也說不好。Promise有三個狀態，pending、resolve和reject。妙處就在於可以一直讓Promise處理pending狀態（可以理解為等待），心情好了，就resolve()進行釋放，在.then()裡面進行相應處理。心情不好就直接reject()打回，那就在.catch()處理。（提示：Promise還可以用來做父子元件通訊，利用resolve()）
點個贊給力鼓勵啦~
個人其他文章推薦：
- 補充一點：IE9不支援AJAX請求頭，免費同學入坑。
- 實現一個可無限摺疊的table
- 當下拉選單資料過大時，該如何應對？
- Vue自定義指令實現input限制輸入正整數
- 版權說明：本文首發於掘金，如需轉載請註明出處。