// 以下大概是日常碰到的操作，攔截響應，判斷status做相應操作
function login () {
  console.log('登陸邏輯')
  return promise.reject(error)
}
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數(shù)據(jù)做點什么
  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('服務器內(nèi)部錯誤')
    return promise.reject(error)
  } else {
    // 其他請求,直接拋出讓業(yè)務去處理
    return promise.reject(error)
  }
});

設計輪子

思考方向

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

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

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

輪子骨架

// 定義個一個class
class Enterclose {
  constructor () {
    // 維護管道數(shù)組
    this.pond = {}
    // 默認管道
    this._default = null
  }
  /**
   * 收集管道
   * callback(payload)
   * @param {any} sign 標記
   * @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 標記
   * @param {any} payload
   * @return
   */
  start (sign, payload) {
  }
}

詳細實現(xiàn)

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

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

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

其中我們需要一個方法用來啟動Enterclose

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

start (sign, payload) {
    const fn = this.getCallback(sign)
    if (fn) {
      return fn(payload)
    }
}
/**
* 根據(jù)標記獲取函數(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
    }
}

實踐

創(chuàng)建實例，用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('服務器內(nèi)部錯誤')
  return promise.reject(error)
})
.default(function (error) {
  // 收集默認管道
  return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
  // 對響應數(shù)據(jù)做點什么
  return response;
}, function (error) {
  // 啟動
  return enterclose.start(error.status, error)
});

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