快捷導(dǎo)航

Vue路由切換和Axios接口取消重復(fù)請求詳解

更新時(shí)間：2022年05月06日 12:09:38 作者：南城大前端

在web項(xiàng)目開發(fā)的過程中,經(jīng)常會(huì)遇到客服端重復(fù)發(fā)送請求的場景,下面這篇文章主要給大家介紹了關(guān)于Vue路由切換和Axios接口取消重復(fù)請求的相關(guān)資料,需要的朋友可以參考下

前言

在日常前端開發(fā)中, 經(jīng)常會(huì)遇到頻繁發(fā)起的重復(fù)請求, 會(huì)給服務(wù)器及網(wǎng)絡(luò)造成不必要的壓力, 可通過取消重復(fù)請求解決

場景

訂單數(shù)據(jù)條件篩選查詢
表單提交按鈕頻繁點(diǎn)擊
路由頁面切換請求未取消

解決方案

在每個(gè)請求發(fā)起的時(shí)候存儲(chǔ)當(dāng)前存儲(chǔ)的標(biāo)記在一個(gè)數(shù)組或Map中, 針對每個(gè)請求的時(shí)候在請求攔截中查詢是否重復(fù), 如果已重復(fù)則取消歷史中重復(fù)的請求, 再發(fā)起當(dāng)前請求, 如果沒有重復(fù), 則添加存儲(chǔ)標(biāo)記并正常請求, 已請求完成的清除存儲(chǔ)標(biāo)記

axios中如何取消請求

可以使用 CancelToken.source 工廠方法創(chuàng)建 cancel token，像這樣：

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

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 處理錯(cuò)誤
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消請求（message 參數(shù)是可選的）
source.cancel('Operation canceled by the user.');

還可以通過傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
});

// cancel the request
cancel();

項(xiàng)目中封裝使用

基本變量定義

// 是否取消重復(fù)請求開關(guān)
const cancelDuplicated = true

// 存儲(chǔ)每個(gè)請求中的map
const pendingXHRMap = new Map()

// 取消請求類型定義 便于后期對此類型不做異常處理
const REQUEST_TYPE = {
  DUPLICATED_REQUEST: 'duplicatedRequest'
}

設(shè)置重復(fù)標(biāo)記的函數(shù)

const duplicatedKeyFn = (config) => {
  // 可在此設(shè)置用戶自定義其他唯一標(biāo)識(shí) 默認(rèn)按請求方式 + 請求地址
  return `${config.method}${config.url}`
}

添加到請求記錄

const addPendingXHR = (config) => {
  if (!cancelDuplicated) {
    return
  }
  const duplicatedKey = JSON.stringify({
    duplicatedKey: duplicatedKeyFn(config),
    type: REQUEST_TYPE.DUPLICATED_REQUEST
  })
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (duplicatedKey && !pendingXHRMap.has(duplicatedKey)) {
      pendingXHRMap.set(duplicatedKey, cancel)
    }
  })
}

刪除請求記錄

const removePendingXHR = (config) => {
  if (!cancelDuplicated) {
    return
  }
  const duplicatedKey = JSON.stringify({
    duplicatedKey: duplicatedKeyFn(config),
    type: REQUEST_TYPE.DUPLICATED_REQUEST
  })
  if (duplicatedKey && pendingXHRMap.has(duplicatedKey)) {
    const cancel = pendingXHRMap.get(duplicatedKey)
    cancel(duplicatedKey)
    pendingXHRMap.delete(duplicatedKey)
  }
}

axios中使用

// 請求攔截處理
axios.interceptors.request.use(config => {
    removePendingXHR(config)
    addPendingXHR(config)
    ...
    return config
})

// 響應(yīng)攔截處理
axios.interceptors.response.use(response => {
    removePendingXHR(response.config)
    ...
}, error => {
    // 如果是取消請求類型則忽略異常處理
    let isDuplicatedType;
    try {
      const errorType = (JSON.parse(error.message) || {}).type
      isDuplicatedType = errorType === REQUEST_TYPE.DUPLICATED_REQUEST;
    } catch (error) {
      isDuplicatedType = false
    }
    if (!isDuplicatedType) {
        // 其他異常處理
    }
})

Vue中當(dāng)路由切換頁面的時(shí)候，將上一個(gè)頁面的所有請求取消

router.beforeEach((to, from, next) => {
    // 遍歷pendingMap，將上一個(gè)頁面的所有請求cancel掉
    pendingXHRMap.forEach((cancel) => {
        cancel();
    });
    pendingXHRMap.clear()
})