vue2 axios的cancelToken防抖 一看就会 干货满满

vue2 通过axios的cancelToken取消发送请求达到防抖的效果
话不多说看代码

1. 第一步 在 utils 里边创建一个 anti_shake.js 文件存放函数

function anti_shake(config, axios) {

  const now_date = new Date().getTime();
  
  const request_info = JSON.parse(sessionStorage.getItem("request_url"));
  
  sessionStorage.setItem(
    "request_url",
    JSON.stringify({ url: config.url, time: new Date().getTime() })
  );
  
  if (request_info === null) return true;
  
  if (now_date - request_info.time < 500 && request_info.url === config.url) {
  
    let cancel;
    config.cancelToken = new axios.CancelToken((c) => {
      cancel = c;
    });
    cancel(`${config.url}请求被中断`);
    
    return false;
  }
  return true;
}

export default anti_shake;

原理也非常简单 获取请求的信息( 请求路径,请求发送的时间) 并存到临时会话中( sessionStorage.setItem() ) 接收下一个请求就取出来跟上一个请求进行对比( sessionStorage.getItem() ) 对比路径和请求时间 如果请求路径一样 时间在500ms业内就进行拦截 并把拦截信息打印到控制台

拦截会返回false
没拦截会返回true
方便进行下一步操作

↑↑↑ 以上是 放到 utils 里边的 anti_shake.js ↑↑↑

2. 第二部就是引用了 在 require.js 里边引用这个文件

import anti_shake from "@/utils/anti_shake";

在请求拦截器里边

import axios from "axios";

const service = axios.create({
	baseURL: xxx
});

service.interceptors.request.use(

  (config) => {
	
	//注意要把axios也传进去  cancelToken 要用到 axios创建实例
 	anti_shake(config, axios);
    return config;

      },
  (err) => {
  
    return Promise.reject(err);
    
  }
  
service.interceptors.response.use(
  (response) => {

	return response;
	
    },
  (error) => {
  
    return Promise.reject(error);
    
  }

export default service;

到这里就大功告成了 快速点击两下发送请求的话只能发送一个 另一个会在控制台打印出来