快捷導(dǎo)航

詳解如何消除axios攔截中的if

更新時(shí)間：2022年04月17日 09:59:15 作者：科目三后吃飯

在使用vue的開發(fā)中,我們會(huì)使用axios來做前后端通信,那這時(shí)候我們就需要對請求前后做攔截,下面這篇文章主要給大家介紹了關(guān)于如何消除axios攔截中if的相關(guān)資料,需要的朋友可以參考下

基本攔截

axios的響應(yīng)錯(cuò)誤攔截中，難免會(huì)對error.status做各種各樣的if判斷，又或者switch。為了防止枯燥乏味的生活（給自己挖坑，換一種姿勢去寫攔截

// 以下大概是日常碰到的操作，攔截響應(yīng)，判斷status做相應(yīng)操作
function login () {
  console.log('登陸邏輯')
  return promise.reject(error)
}
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response;
}, function (error) {
  if (error.status === 401) {
    // 401重新登錄
    console.log('未登陸')
    return login(error)
  } else if (error.status === 404) {
    console.log('404-什么都沒')
    return promise.reject(error)
  } else if (error.status === 422) {
    console.log(error.response.data.message)
    return promise.reject(error)
  } else if (error.status === 500) {
    console.log('服務(wù)器內(nèi)部錯(cuò)誤')
    return promise.reject(error)
  } else {
    // 其他請求,直接拋出讓業(yè)務(wù)去處理
    return promise.reject(error)
  }
});

設(shè)計(jì)輪子

思考方向

首先思考下怎么實(shí)現(xiàn)這個(gè)東西

需要一個(gè)在內(nèi)部消化if的邏輯判斷
根據(jù)判斷去執(zhí)行相應(yīng)的邏輯，意味著我們要在內(nèi)部維護(hù)一個(gè)邏輯數(shù)組（以下稱為管道數(shù)組），配合成功后即觸發(fā)對應(yīng)管道。所以在開始調(diào)用函數(shù)去執(zhí)行前，先要收集好管道。這個(gè)方法需要傳一個(gè)標(biāo)記（用來判斷是否匹配）和回調(diào)函數(shù)（匹配成功后的邏輯）
除了傳標(biāo)記，需要傳一個(gè)payload（例如攔截中的error）參數(shù)，payload可以讓我們在回調(diào)函數(shù)做出更多的對應(yīng)操作
在最后再添加一個(gè)default函數(shù)來收集匹配失敗后的函數(shù)。

現(xiàn)在，已經(jīng)在心中擬好了一個(gè)小輪子的五臟六腑。

輪子骨架

// 定義個(gè)一個(gè)class
class Enterclose {
  constructor () {
    // 維護(hù)管道數(shù)組
    this.pond = {}
    // 默認(rèn)管道
    this._default = null
  }
  /**
   * 收集管道
   * callback(payload)
   * @param {any} sign 標(biāo)記
   * @param {Function|Object} callback 回調(diào)函數(shù)|函數(shù)this
   * @return this
   * */
  use (sign, callback) {
    return this
  }
  /**
   * 收集匹配失敗的管道
   * callback(payload)
   * @param {Function} callback 回調(diào)函數(shù)|函數(shù)this
   * @return this
   * */
  default (callback) {
    this._default = callback
    return this
  }
  /**
   * 執(zhí)行管道流
   * @param {any} sign 標(biāo)記
   * @param {any} payload
   * @return
   */
  start (sign, payload) {
  }
}

詳細(xì)實(shí)現(xiàn)

以上把基本的api骨架寫好，然后再一個(gè)一個(gè)慢慢實(shí)現(xiàn)內(nèi)部的邏輯。

首先是use，用來收集管道，需求中標(biāo)記是唯一的，所以我們的this.ponds的結(jié)構(gòu)是{標(biāo)記: callback}

use (sign, callback) {
    this.ponds[sign] = callback
    return this
}

其中我們需要一個(gè)方法用來啟動(dòng)Enterclose

通過getCallback函數(shù)去篩選和標(biāo)記匹配的管道，返回對應(yīng)的函數(shù)。這樣一個(gè)消除if的小輪子就搞好啦

start (sign, payload) {
    const fn = this.getCallback(sign)
    if (fn) {
      return fn(payload)
    }
}
/**
* 根據(jù)標(biāo)記獲取函數(shù)
* @param {*} sign 
* @return {Function}
*/
getCallback (sign) {
    const key = Object.keys(this.ponds).find(key => key === sign)
    if (key) {
      return this.ponds[key]
    } else if (this._default) {
      return this._default
    }
}

實(shí)踐

創(chuàng)建實(shí)例，用use和default收集管道，然后在攔截中通過start觸發(fā)判斷

const enterclose = new Enterclose()
// 收集管道
enterclose
.use(401, function (error) {
  console.log('未登陸')
  return login(error)
})
.use(404, function (error) {
  console.log('404-什么都沒')
  return promise.reject(error)
})
.use(429, function (error) {
  console.log(error.response.data.message)
  return promise.reject(error)
})
.use(500, function (error) {
  console.log('服務(wù)器內(nèi)部錯(cuò)誤')
  return promise.reject(error)
})
.default(function (error) {
  // 收集默認(rèn)管道
  return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response;
}, function (error) {
  // 啟動(dòng)
  return enterclose.start(error.status, error)
});

你也可以根據(jù)自己的場景做一些調(diào)整，例如支持Promise啊，或者說加一個(gè)finally函數(shù)，每次走管道最后都會(huì)調(diào)用這個(gè)回調(diào)函數(shù)之類