快捷導(dǎo)航

項(xiàng)目中如何使用axios過濾多次重復(fù)請求詳解

更新時(shí)間：2021年07月07日 11:26:13 作者：峰峰會(huì)很好

在項(xiàng)目開發(fā)中經(jīng)常需要處理重復(fù)點(diǎn)擊導(dǎo)致多次調(diào)用接口的問題,這篇文章主要介紹了項(xiàng)目中如何使用axios過濾多次重復(fù)請求的相關(guān)資料,需要的朋友可以參考下

一、前言：

我們在web應(yīng)用開發(fā)過程當(dāng)中，經(jīng)常會(huì)遇到一個(gè)時(shí)刻發(fā)起了多個(gè)請求的場景

這個(gè)情況下，我們通常的做法有兩種：

可以在請求時(shí)show一個(gè)loading，阻止用戶操作。
或者人為加個(gè)變量，做一個(gè)請求的節(jié)流

我們的項(xiàng)目中，目前大部分情況也是采用以上兩種方式做的。今天來介紹一個(gè)新的方式。

二、CancelToken類

我們之前實(shí)例化一個(gè)Promise，這個(gè)對象是否成功與否，是無法在函數(shù)外部決定的，這里邊使用要用到一個(gè)小竅門，可以讓一個(gè)promise 和resolve分離。任何時(shí)機(jī)都可以觸發(fā)resolve:

  // 一個(gè)promise
  let resolvePromise
  let p = new Promise((resolve, reject) => {
    resolvePromise = resolve
  })
  // 這樣在外部執(zhí)行
  resolvePromise()

ok，有了這個(gè)前提，我們需要借助axios.CancelToken這個(gè)類。

這個(gè)類相當(dāng)于在每次請求的時(shí)候開啟另一個(gè)promise和當(dāng)前的請求形成一個(gè)promise.race(請求p1，取消請求p2)，在promise中的resolve方法賦值給了一個(gè)外部的變量去接收。我們可以根據(jù)需求，人為決定是否取消前次請求。其實(shí)這就類似，原來我們寫fetch封裝接口超時(shí)的Promise.race類似。

cancelToken中也提供了相應(yīng)的static方法source用來生成一個(gè)cancelToken和一個(gè)cancel方法其實(shí)就是這個(gè)promise的一個(gè)resolve。

    CancelToken.source = function source() {
    var cancel;
    // 
    var token = new CancelToken(function executor(c) {
        cancel = c;
    });
    return {
        token: token,
        cancel: cancel,
    };

根據(jù)我們常用的的緩存方式，我們可以聲明一個(gè)map來存儲(chǔ)每次請求的url，同時(shí)存儲(chǔ)對應(yīng)的cancel方法。

    // 聲明一個(gè)全局map
    const pendingHttp = new Map()
    // axios中內(nèi)置的CancelToken類
    const CancelToken = axios.CancelToken
       
    function addApi (config) {
      config.cancelToken = new CancelToken((cancel) => {
        const url = config.url
        console.log(pendingHttp)
        if (!pendingHttp.has(url)) {
          pendingHttp.set(url, cancel)
        }
      })
    }

    function cancelApi (config) {
      const url = config.url
      if (pendingHttp.has(url)) { // 如果在 pending 中存在當(dāng)前請求標(biāo)識，需要取消當(dāng)前請求，并且移除
        const cancel = pendingHttp.get(url)
        cancel(url + '取消了')
        pendingHttp.delete(url) // 清空當(dāng)前url的緩存
      }
    }

要特殊注意，要想取消掉一個(gè)請求，需要在config上添加cancelToken這個(gè)屬性賦值為CancelToken的實(shí)例。否則cancel不掉。

就像操作定時(shí)器一樣，要先嘗試取消上一次，然后再開啟下一次

    httpService.interceptors.request.use(config => {

      cancelApi(config)
      addApi(config)
      
      // 本地調(diào)試的時(shí)候,是跨域的情況，加請求頭會(huì)有限制(此處是項(xiàng)目代碼無關(guān)緊要)
      const { headers = {} } = config; const { globalObj = {} } = window
      Object.assign(headers, globalObj, { from })
      
      return config
    }, error => {
      console.log(error)
      return Promise.reject(error)
    })

然后還有一種可能性，第一次請求已經(jīng)返回了，又發(fā)起了相同的一次請求，所以在response里邊也要cancelApi一下。

    httpService.interceptors.response.use(
      response => {
        cancelApi(response.config)
        sentryCatchApi(response)
      },
      error => {
        // 請求超時(shí)
        if (error.message.includes('timeout')) { // 判斷請求異常信息中是否含有超時(shí)timeout字符串
          Toast.error({ text: '網(wǎng)頁請求超時(shí)，請刷新重試~' })
        }
        sentryCatchApi(error)
        return Promise.reject(error)
      }
    )

我們需要注意一點(diǎn)，cancel其實(shí)就是resolve，我們cancel執(zhí)行時(shí)候傳入的參數(shù)，會(huì)最終在response的error回調(diào)中，作為參數(shù)返回，這樣我們的捕捉錯(cuò)誤的方法可能會(huì)有報(bào)錯(cuò)。

    // 假設(shè)我們的error方法是這樣封裝的。 來看一下sentryCatchApi
    error => {
      sentryCatchApi(error)
      return Promise.reject(error)
    }
  // 由于這個(gè)方法需要接收一個(gè)對象，但是我們cancel取消請求的情況下，返回的是一個(gè)字符串，這時(shí)就報(bào)錯(cuò)了。
  function sentryCatchApi (res) {
      try {
        res = res || {}
        const resData = res.data || {}
        Sentry.captureException(JSON.stringify(resData))
        console.log(`
          獲取數(shù)據(jù)失敗:
          請?jiān)跒g覽器中打開進(jìn)入 webview的地址，并粘貼出來，便于問題排查
          :接口相關(guān)信息:
          接口地址:${res.config.url},
          接口返回值:code:${resData.code},
          message:${resData.message},
          data:${JSON.stringify(resData.data)}
        `)
      } catch (err) {
        console.error(err)
      }
    }

需要使用isCancel這個(gè)api

   error => {
    if (axios.isCancel(error)) return console.log('請求被取消了', error.message)
    sentryCatchApi(error)
    return Promise.reject(error)
  }