【Axios】二次封装axios，取消接口重复调用

http.js文件

import axios from 'axios'; // 引入axios

// 请求超时时间
axios.defaults.timeout = 600000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 函数返回唯一的请求key
function getRequestOneKey(config) {
  let { method, url, params, data } = config;
  return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
}

// 添加请求信息
let pendingRequest = new Map();
function addPendingRequest(config) {
  let requestKey = getRequestOneKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingRequest.has(requestKey)) {
      pendingRequest.set(requestKey, cancel);
    }
  });
}

// 取消重复请求，移除重复请求信息
function removePendingRequest(config) {
  let requestKey = getRequestOneKey(config);
  if (pendingRequest.has(requestKey)) {
    // 如果是重复的请求，则执行对应的cancel函数
    let cancel = pendingRequest.get(requestKey);
    cancel(requestKey);
    // 将前一次重复的请求移除
    pendingRequest.delete(requestKey);
  }
}

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 检查是否存在重复请求，若存在则取消已发的请求
    removePendingRequest(config);
    // 把当前请求信息添加到pendingRequest对象中
    addPendingRequest(config);
    return config;
  },
  (error) => {
    console.log(error, '请求前')
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 从pendingRequest对象中移除请求
    removePendingRequest(response.config);
    return response;
  },
  (error) => {
    // 从pendingRequest对象中移除请求
    removePendingRequest(error.config || {});
    if (axios.isCancel(error)) {
      // console.log("已取消的重复请求：" + error.message);
      return
    } else {
    //这里的作用是为了判断当接口报不同错误时，前端对应提示文案
      switch (error.response.status) {
        case 502:
          message.error("网络异常，请稍后重试");
          break;
        case 500:
          message.error("系统错误");
          break;
          // case 404:
          //   message.error("status：404");
          //   break;
        default:
          break;
      }
     store.commit("loadingTitle", false);
      return Promise.reject(error);
      // return error
      // 添加异常处理
    }

  }
);

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });

}
/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}
/**
 * delete方法，对应delete请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function $delete(url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url, {
      params: params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

api.js(api接口统一管理文件，后续用到的接口都在这个文件导出)

//引入http.js文件
import { get, post, $delete, put } from "./http";
export const getUserDataList=(data)=>{
//  /a表示接口
  return get('/a',data)
}
export const getUserData=(data)=>{
//  /a/b表示接口
  return post('/a/b',data)
}
//编辑用户
export const putUserData=(data)=> {
  return put(`/a/b/detail/${data.user_id}`, data);
};
//删除用户
export const delUserData=(data)=> {
  return $delete(`/a/b/detail/${data.user_id}`, data);
};

A.vue(A页面需要调用接口获取用户列表)

<template>
  <div>A页面</div>
</template>
<script>
import {getUserDataList} from "@/api/api";//引入api文件
export default{
  name:'A',
  data(){
   return {}
 },
 create(){},
 mounted(){
 //调用函数
 this.getuserList()
 },
 methods:{

 //param就是需要传的参数
   getuserList(){
     let param={
        page:20,
        cur:1
     }
     getUserDataList(param).then((res)=>{
     //res就是后端返回的数据
     }).catch((err)=>{
     //若接口返回500之类的代码会运行到这里而不会运行then里的代码
     })
   }
 }
}
</script>