淺談axios中取消請求及阻止重復(fù)請求的方法

更新時間：2022年02月15日 10:06:31 作者：harsima

在實際項目中，我們可能需要對請求進行“防抖”處理。本文主要實現(xiàn)axios中取消請求及阻止重復(fù)請求，具有一定的參考價值，感興趣的可以了解一下

前言

在實際項目中，我們可能需要對請求進行“防抖”處理。這里主要是為了阻止用戶在某些情況下短時間內(nèi)重復(fù)點擊某個按鈕，導(dǎo)致前端向后端重復(fù)發(fā)送多次請求。這里我列舉兩種比較常見的實際情況：

PC端 - 用戶雙擊搜索按鈕，可能會觸發(fā)兩次搜索請求
移動端 - 因移動端沒有點擊延遲，所以極易造成誤操作或多操作，造成請求重發(fā)

以上情況有可能在有Loading遮罩時依然發(fā)生，所以我們要考慮前端阻止重復(fù)請求的方法。

核心——CancelToken

在Axios中取消請求最核心的方法是CanelToken。在官網(wǎng)文檔中有寫到兩種方法使用CancelToken，這里簡單粘貼出來，并增加了注釋

方法1：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // 必須對請求進行cancelToken設(shè)置
  cancelToken: source.token
}).catch(function (thrown) {
  // 如果請求被取消則進入該方法判斷
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 取消上面的請求
// source.cancel('messge') message為可選項，必須為String
source.cancel('Operation canceled by the user.');

方法2：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  // 在options中直接創(chuàng)建一個cancelToken對象
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消上面的請求
cancel();

實際應(yīng)用和封裝

上文已對axios中的核心方法進行了舉例，但是在實際中我們往往不會像官網(wǎng)例子中那樣使用，更多的是在axios的攔截器中做全局配置管理。這樣的話我們需要對上面的代碼進行一些改變。

這里說一下我實現(xiàn)的大體思路：

我們需要對所有正在進行中的請求進行緩存。在請求發(fā)起前判斷緩存列表中該請求是否正在進行，如果有則取消本次請求。
在任意請求完成后，需要在緩存列表中刪除該次請求，以便可以重新發(fā)送該請求

思路說完，我們直接上代碼

// 正在進行中的請求列表
let reqList = []

/**
 * 阻止重復(fù)請求
 * @param {array} reqList - 請求緩存列表
 * @param {string} url - 當前請求地址
 * @param {function} cancel - 請求中斷函數(shù)
 * @param {string} errorMessage - 請求中斷時需要顯示的錯誤信息
 */
const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
  const errorMsg = errorMessage || ''
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg)
      return
    }
  }
  reqList.push(url)
}

/**
 * 允許某個請求可以繼續(xù)進行
 * @param {array} reqList 全部請求列表
 * @param {string} url 請求地址
 */
const allowRequest = function (reqList, url) {
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      reqList.splice(i, 1)
      break
    }
  }
}

const service = axios.create()

// 請求攔截器
service.interceptors.request.use(
  config => {
 let cancel
   // 設(shè)置cancelToken對象
    config.cancelToken = new axios.CancelToken(function(c) {
     cancel = c
    })
    // 阻止重復(fù)請求。當上個請求未完成時，相同的請求不會進行
    stopRepeatRequest(reqList, config.url, cancel, `${config.url} 請求被中斷`)
    return config
  },
  err => Promise.reject(err)
)

// 響應(yīng)攔截器
service.interceptors.response.use(
  response => {
    // 增加延遲，相同請求不得在短時間內(nèi)重復(fù)發(fā)送
    setTimeout(() => {
      allowRequest(reqList, response.config.url)
    }, 1000)
    // ...請求成功后的后續(xù)操作
    // successHandler(response)
  },
  error => {
    if (axios.isCancel(thrown)) {
      console.log(thrown.message);
    } else {
      // 增加延遲，相同請求不得在短時間內(nèi)重復(fù)發(fā)送
      setTimeout(() => {
        allowRequest(reqList, error.config.url)
      }, 1000)
    }
    // ...請求失敗后的后續(xù)操作
    // errorHandler(error)
  }
)

一些小細節(jié)

為什么沒用前文方法2中的代碼進行cancelToken設(shè)置？
axios的文檔中有一條備注：

Note: you can cancel several requests with the same cancel token.
你可以使用相同的Token來取消多個請求

所以我不想在每個請求前都new一個新的對象
請務(wù)必使用方法2，保證每次cancel都能正確執(zhí)行。之前方法會導(dǎo)致當出現(xiàn)cancel后，后續(xù)請求也會持續(xù)cancel

為什么在response中需要增加延遲？
因為不想讓用戶在極短的時間內(nèi)重復(fù)進行相同請求。
請注意，在response中阻止請求和在request中的阻止請求是兩個概念：
request中是阻止上個請求未完成時又開始了相同的請求
response中是阻止上個請求完成后一段時間內(nèi)不允許相同請求

我能否在cancel時傳遞一個對象，而不僅僅是message？
以官方提供的接口來看是不可以的，你可以仿照官方源碼進行重新封裝，或者使用第三方插件，或者使用另一個方法：將對象轉(zhuǎn)換為JSON字符串，然后在需要的地方再轉(zhuǎn)換回來

到此這篇關(guān)于淺談axios中取消請求及阻止重復(fù)請求的方法的文章就介紹到這了,更多相關(guān)axios中取消請求及阻止重復(fù)請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: