美文网首页
axios 防重复请求

axios 防重复请求

作者: 芸芸众生ing | 来源:发表于2021-02-01 09:29 被阅读0次
import axios from "axios";
import NProgress from "nprogress";
import { Message } from 'element-ui';
import { getCookie } from "xingyuelongchen";
const cancelToken = axios.CancelToken;
let axiosRequestList = [];
let messageNotice = null;
NProgress.configure({
    easing: "ease",
    speed: 500,
    showSpinner: true
});
const errorMessage = { 400: '请求错误', 401: '暂无权限', 404: '资源不存在', 500: '服务器错误', 502: '服务器错误' }
const removePending = (config) => {
    NProgress.done();
    let index = axiosRequestList.findIndex(e => e.url === axios.defaults.baseURL + config.url);
    if (index > 0) {
        axiosRequestList[index].cancel();
        axiosRequestList.splice(index, 1);
    }
}
// 清空已发起且未完成的请求
export const closeRequest = () => {
  axiosRequestList.forEach(e => e.cancel());
  axiosRequestList = [];
}
export const downloadFile = (res, filename = '') => {
    let blob = new Blob([res.data], { type: res.config.responseType });
    let downloadElement = document.createElement('a');
    let href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    let fileName = filename || res.headers['content-disposition'].match(/(?<=\=).*/g);
    downloadElement.download = fileName.length ? decodeURIComponent(fileName[0]) : '未命名';
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
}
const request = (config) => {
    // removePending(config); 放在这里是取消掉上一次的请求
    if (!config.removePending) config.cancelToken = new cancelToken(function executor(c) {
        axiosRequestList.unshift({
            url: axios.defaults.baseURL + config.url,
            cancel: c
        });
    });
    // 放这里是取消本次请求,上次请求继续完成
    removePending(config);
    NProgress.start();
    if (getCookie('token')) config.headers["token"] = getCookie('token');

    return config;
}
const requestError = (err) => {
    let { config = {} } = err;
    removePending(config);
    return Promise.reject(err);
}
const response = (res) => {
    let { data, config, status, statusText } = res;
    removePending(config);
    if (status === 200) {
        if (['blob', 'arraybuffer'].includes(config.responseType)) { downloadFile(res); return res }
        if (data.info) {
            messageNotice && messageNotice.close();
            if (data.success) messageNotice = Message.success(data.info);
            else messageNotice = Message.error(data.info);
        }
        if (data.success) return res;
    }
    return Promise.reject(res);
}
const responseError = (err) => {
    let { config = {}, response = null } = err;
    removePending(config);
    if (response && response.status) {
        messageNotice && messageNotice.close();
        messageNotice = Message.error(errorMessage[response.status] || response.statusText);
    }
    return Promise.reject(err);
}
axios.defaults["baseURL"] = process.env.VUE_APP_BASE_API || '';
axios.defaults["timeout"] = process.env.VUE_APP_TIMEOUT || 10000;
axios.defaults["crossDomain"] = true;
axios.defaults["withCredentials"] = true;
axios.defaults["method"] = "get";
axios.defaults.headers.common["Accept-Language"] = "zh-cn";
axios.interceptors.request.use(request, requestError);
axios.interceptors.response.use(response, responseError);
export default axios


相关文章

  • axios 防重复请求

  • axios 重复请求

    先贴上代码 参考:axios重复请求 只是修改了请求部分代码。有空可以看看参考链接。他里面的方法不太适合我现在的情况。

  • axios 重复请求

    需要在axios配置里面加上以上代码。 ``` letpending=[];//声明一个数组用于存储每个ajax请...

  • Axios 取消重复请求

    有什么用? 当用户频繁点击在短时间内发送多个 ajax 请求,但是由于网络原因服务器数据无法及时响应返回,这时候,...

  • axios取消重复请求

    在开发中,经常会遇到接口重复请求导致的各种问题。 对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影...

  • axios取消重复请求

    当第一个axios发起连续请求的时候,这时候我们就需要取消第二、第三个请求,因为他们都是同一个请求发起。 来看一下...

  • 重复点击,请求事件问题

    1.axios 原理,请求响应拦截重复请求 https://mp.weixin.qq.com/s/GtHBgzQ5...

  • axios 代理服务器

    npm i axios 下载 import axios from 'axios' 引入 发送请求axios请求 跨...

  • Axios如何取消重复请求

    在 Web 项目开发过程中,我们经常会遇到重复请求的场景,如果系统不对重复的请求进行处理,则可能会导致系统出现各种...

  • Axios如何取消重复请求

    在实际开发中,我们需要对用户发起的重复请求进行拦截处理,比如用户快速点击提交按钮。 对于重复的 get 请求,会导...

网友评论

      本文标题:axios 防重复请求

      本文链接:https://www.haomeiwen.com/subject/xycctltx.html