爲什麼要再封裝 AJAX？

前言

已經有同窗提醒了使用axios.create(),使用axios.create()能夠解決下面說的1 、二、三、5點，樓主也建議使用這種方式，既然axios已經提供了這樣的API，那麼也不必像本文這種方式實現，有點畫蛇添足的嫌疑。因此本文在很大程度上已經沒有的意義了，但本文針對特殊狀況也是一種好的選擇，例如 第四點 ，可根據本身的業務需求調整。

再封裝AJAX所帶來的好處是你想象不到的! 不管是對於代碼的高效管理，仍是系統的設計...其收益遠遠超出你的想象。

爲什麼須要在封裝

咱們先來看看如下應用場景，項目中涉及100個AJAX請求，其中：

1. 其中60個須要在請求頭header設置token headers: {token: token}用於權限校驗;
2. 其中20個爲上傳EXCEL文件須要在請求頭中設置Content-Type;

headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
      }
複製代碼

3. ③最後20個請求用來獲取文件流，須要指定接受類型responseType: 'blob'
4. 須要對全局發起request進行攔截並作異步處理（強調：是異步處理）；
5. 若是你的項目已經作到一半，如今後端要加上token權限作認證；

   

上面說的 一、二、3能夠在全局request攔截中進行處理，可是代價極大，須要爲這100個接口都作判斷再作相應處理... ；固然也能夠不用全局攔截，爲每一個接口都單獨定義，我相信有很多同窗還是這樣處理的，可是只要有改動，例如如今我要求全部的請求頭都新增一個參數，那就只能一個一個接口的改.....這不是咱們想要的結果，因此 咱們須要對AJAX再封裝！AJAX再封裝！AJAX再封裝！，由於至關重要，因此要多說幾遍....

針對第四種狀況，在axios裏面若是對request只能作一些同步操做；作異步，直接就報錯了... 但這也能夠用封裝AJAX來實現！簡直就是黑魔法...厲害厲害...

封裝實現

封裝其實很簡單，就是對原來真正的AJAX套一個殼，這個殼就是一個函數！ 在這個函數裏都幹了些什麼見不得人事呢？幹什麼均可以，上面說的一、 二、 三、 四、 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限制輸入正整數
• 版權說明：本文首發於掘金，如需轉載請註明出處。