快捷導(dǎo)航

vue axios攔截器常用之重復(fù)請(qǐng)求取消

更新時(shí)間：2021年09月08日 10:43:13 作者：小撕夜

我們大家在開(kāi)發(fā)中,經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于axios攔截器之重復(fù)請(qǐng)求取消的相關(guān)資料,需要的朋友可以參考下

引言

上一篇介紹了axios的簡(jiǎn)單封裝，知道了axios攔截器的應(yīng)用場(chǎng)景和方法，今天來(lái)看一下對(duì)于響應(yīng)時(shí)間過(guò)長(zhǎng)且請(qǐng)求次數(shù)過(guò)高的情況攔截器如何處理。

取消請(qǐng)求的方法

Axios使用內(nèi)部提供的CancelToken來(lái)取消請(qǐng)求

官網(wǎng)示例1：用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
})

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

官網(wǎng)示例2：通過(guò)傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來(lái)創(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();

可以看到上面都是在單個(gè)請(qǐng)求中創(chuàng)建的 cancel token 實(shí)際工作中我們需要對(duì)所有的請(qǐng)求都進(jìn)行處理，接下來(lái)我們看下如何在攔截器實(shí)現(xiàn)取消請(qǐng)求的功能

攔截器中取消重復(fù)請(qǐng)求

import axios from 'axios'
import baseURL from './config'
import qs from 'qs'

const pendingRequest = new Map(); // 請(qǐng)求對(duì)象
const CancelToken = axios.CancelToken;

axios.defaults.timeout = 30000
axios.defaults.baseURL = baseURL.target

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function(config) {
  // 在發(fā)送請(qǐng)求之前做些什么
  config.headers = {
      'content-type': 'application/json',
      'token': getToken()
  }
  // 獲取請(qǐng)求key
  let requestKey = getReqKey(config);

  // 判斷是否是重復(fù)請(qǐng)求
  if (pendingRequest.has(requestKey)) { // 是重復(fù)請(qǐng)求
    removeReqKey(requestKey); // 取消
  }else{
    // 設(shè)置cancelToken
    config.cancelToken = new CancelToken(function executor(cancel) {
      pendingRequest.set(requestKey, cancel); // 設(shè)置
    })
  }

  return config;
}, function (error) {
  // 請(qǐng)求錯(cuò)誤
  return Promise.reject(error);
});

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 請(qǐng)求對(duì)象中刪除requestKey
  let requestKey = getReqKey(response.config);
  removeReqKey(requestKey);

  // 對(duì)返回?cái)?shù)據(jù)做點(diǎn)啥 比如狀態(tài)進(jìn)行攔截
  if (response.data.status !== 200) {
      Toast({
        message: response.data.message,
        type: 'warning',
        duration: 1000
      })
      return
    }
    
  // 沒(méi)問(wèn)題 返回服務(wù)器數(shù)據(jù)
  return response.data;
}, function (error) {
  let requestKey = getReqKey(error.config);
  removeReqKey(requestKey);
  
  // 響應(yīng)錯(cuò)誤
  return Promise.reject(error);
});

// 獲取請(qǐng)求key
function getReqKey(config) {
  // 請(qǐng)求方式、請(qǐng)求地址、請(qǐng)求參數(shù)生成的字符串來(lái)作為是否重復(fù)請(qǐng)求的依據(jù)
  const { method, url, params, data } = config; // 解構(gòu)出來(lái)這些參數(shù)
  // GET ---> params  POST ---> data
  const requestKey =  [ method, url, qs.stringify(params), qs.stringify(data)].join('&');
  return requestKey;
}

// 取消重復(fù)請(qǐng)求
function removeReqKey(key) {
  const cancelToken = pendingRequest.get(key);
  cancelToken(key); // 取消之前發(fā)送的請(qǐng)求
  pendingRequest.delete(key); // 請(qǐng)求對(duì)象中刪除requestKey
}