• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue axios拦截器常用之重复请求取消

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

引言

上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理。

取消请求的方法

Axios使用内部提供的CancelToken来取消请求

官网示例1:用CancelToken.source工厂方法创建 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 {
     // 处理错误
  }
});

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

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

官网示例2:通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();

可以看到上面都是在单个请求中创建的 cancel token 实际工作中我们需要对所有的请求都进行处理,接下来我们看下如何在拦截器实现取消请求的功能

拦截器中取消重复请求

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

const pendingRequest = new Map(); // 请求对象
const CancelToken = axios.CancelToken;

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

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  config.headers = {
      'content-type': 'application/json',
      'token': getToken()
  }
  // 获取请求key
  let requestKey = getReqKey(config);

  // 判断是否是重复请求
  if (pendingRequest.has(requestKey)) { // 是重复请求
    removeReqKey(requestKey); // 取消
  }else{
    // 设置cancelToken
    config.cancelToken = new CancelToken(function executor(cancel) {
      pendingRequest.set(requestKey, cancel); // 设置
    })
  }

  return config;
}, function (error) {
  // 请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 请求对象中删除requestKey
  let requestKey = getReqKey(response.config);
  removeReqKey(requestKey);

  // 对返回数据做点啥 比如状态进行拦截
  if (response.data.status !== 200) {
      Toast({
        message: response.data.message,
        type: 'warning',
        duration: 1000
      })
      return
    }
    
  // 没问题 返回服务器数据
  return response.data;
}, function (error) {
  let requestKey = getReqKey(error.config);
  removeReqKey(requestKey);
  
  // 响应错误
  return Promise.reject(error);
});

// 获取请求key
function getReqKey(config) {
  // 请求方式、请求地址、请求参数生成的字符串来作为是否重复请求的依据
  const { method, url, params, data } = config; // 解构出来这些参数
  // GET ---> params  POST ---> data
  const requestKey =  [ method, url, qs.stringify(params), qs.stringify(data)].join('&');
  return requestKey;
}

// 取消重复请求
function removeReqKey(key) {
  const cancelToken = pendingRequest.get(key);
  cancelToken(key); // 取消之前发送的请求
  pendingRequest.delete(key); // 请求对象中删除requestKey
}

结语

以上就是对重复请求的处理,如果对拦截器不清楚的可以看下上篇文章,有问题欢迎大家提出指正,我会在第一时间更新。

到此这篇关于vue axios拦截器常用之重复请求取消的文章就介绍到这了,更多相关axios拦截器重复请求取消内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue echarts实现横向柱状图发布时间:2022-02-05
下一篇:
利用JavaScript做数独的完整实现过程发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap