怎么消除axios攔截中的if

今天小編給大家分享一下怎么消除axios攔截中的if的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

基本攔截

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

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

設計輪子

思考方向

首先思考下怎么實現這個東西

• 需要一個在內部消化if的邏輯判斷

• 根據判斷去執行相應的邏輯，意味著我們要在內部維護一個邏輯數組（以下稱為管道數組），配合成功后即觸發對應管道。所以在開始調用函數去執行前，先要收集好管道。這個方法需要傳一個標記（用來判斷是否匹配）和回調函數（匹配成功后的邏輯）

• 除了傳標記，需要傳一個payload（例如攔截中的error）參數，payload可以讓我們在回調函數做出更多的對應操作

• 在最后再添加一個default函數來收集匹配失敗后的函數。

現在，已經在心中擬好了一個小輪子的五臟六腑。

輪子骨架

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

詳細實現

以上把基本的api骨架寫好，然后再一個一個慢慢實現內部的邏輯。

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

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

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

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

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

實踐

創建實例，用use和default收集管道，然后在攔截中通過start觸發判斷

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('服務器內部錯誤')
  return promise.reject(error)
})
.default(function (error) {
  // 收集默認管道
  return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什么
  return response;
}, function (error) {
  // 啟動
  return enterclose.start(error.status, error)
});

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

以上就是“怎么消除axios攔截中的if”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。