vue2/3 axios 请求重试、取消请求、loading 串行并行等（分享）

codeCat!

已于 2023-06-26 11:30:02 修改

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签：前端 axios vue vue.js javascript

于 2023-06-20 10:25:31 首次发布

本文链接：https://blog.csdn.net/weixin_60547084/article/details/131284262

版权

vue 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

文章目录

基础版，添加 loading

在请求响应拦截器里面添加 loading，这样就不需要给每一个请求添加 loading 了
这些代码都是 vue2 项目的，vue3 也通用，改一下 loading 和 message 就好了（主要是 element 的区别）
我这里最后没有合并代码，有的配置不适合写在一起，看自己项目的需要

import axios from 'axios';
import { Loading, Message } from 'element-ui';

const instance = axios.create({
  baseURL: 'http://localhost:5500',
  timeout: 30000,
});

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    loadingInstance = Loading.service({
      fullscreen: true,
      text: '加载中...',
      background: "black",
    });
    return config;
  },
  // 断网走这里
  (error) => {
    Message.error('请求错误：' + error.message);
    return Promise.reject(error);
  },
);

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingInstance.close();
    return data;
  },
  // !== 2xx 走这里
  (error) => {
    loadingInstance.close();
    return Promise.reject(error.response);
  },
);

export default instance

响应状态码配置

响应状态码配置，更好的给用户提示，这里只设计到响应，就只写了响应拦截

// 根据规范添加配置
const statusOption = [
  {
    code: "200",
    state: "success",
    description: "请求(或处理)成功",
  },
  {
    code: "400",
    state: "ParameterError",
    description: "请求参数不完整或不正确",
  },
  {
    code: "401",
    state: "Unauthorized",
    description: "访问请求未授权! 当前 SESSION 失效, 请重新登陆",
  },
  {
    code: "403",
    state: "Forbidden",
    description: "您无权进行此操作，请求执行已拒绝",
  },
  {
    code: "404",
    state: "NotFound",
    description: "找不到与请求匹配的 HTTP 资源",
  },
  {
    code: "405",
    state: "HttpMehtodError",
    description: "HTTP请求类型不合法",
  },
  {
    code: "406",
    state: "HttpRequestError",
    description: "HTTP请求不合法,请求参数可能被篡改",
  },
  {
    code: "407",
    state: "URLExpireError",
    description: "该URL已经失效",
  },
  {
    code: "500",
    state: "Error",
    description: "内部请求出错",
  },
];

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingInstance.close();
    // 这里是请求成功的内部状态码
    // 这个要和后端约定，我这里就默认除了 200 都有问题
    // 这样就不用在请求接口出错的时候一个个 message 了
    if (data.status !== 200) {
      Message.error(data.message);
      return Promise.reject(data);
    }
    return Promise.resolve(data);
  },
  (error) => {
    let status = error.response.status;
    if (status < 400) {
      Message.warning(error.response.statusText);
    } else {
      let err = statusOption.find((item) => item.code == status);
      Message.error(err ? err.description : "响应出错请联系管理员！");
    }
    loadingInstance.close();
    return Promise.reject(error.response);
  }
);

loading 串行、并行

串行 loading 闪屏、并行 loading 提前关闭

串行的情况是请求之间的依赖，请求 A 完成后立即开始请求 B，这样会导致 loading 闪屏
并行是两个请求同时请求，请求 A 的时间为 5s，请求 B 的时间为 3s，因为 loading 都是同一个实例，会导致请求 B 时提前关闭 loading，关闭两秒后又请求到了新的数据

import axios from "axios";
import { Loading, Message } from 'element-ui';

const instance = axios.create({
  baseURL: "http://localhost:5500",
  timeout: 30000,
});

// 处理并行
let loadingCount = 0;

// 处理串行
let loadingTimer = null;

function loadingClose() {
  loadingCount--;
  if (!loadingCount) {
    // 延迟等待是否还有下一个请求
    loadingTimer = setTimeout(() => {
      loadingInstance.close();
      loadingTimer = null;
    }, 300);
  }
}

function loadingOpen() {
  loadingCount++;
  // 如果有请求需要清除关闭
  if (loadingTimer) {
    clearTimeout(loadingTimer);
    loadingTimer = null;
  }
  loadingInstance = Loading.service({
    fullscreen: true,
    text: "加载中...",
    background: "black",
  });
}

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    loadingOpen();
    return config;
  },
  (error) => {
    Message.error("请求错误：" + error.message);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingClose();
    return data;
  },
  (error) => {
    loadingClose();
    return Promise.reject(error.response);
  }
);

export default instance;

请求挂起

延迟请求发送
我这里的应用场景是 token，当我发现当前请求没有 token 时，先挂起当前请求然后获取 token，在添加上

import axios from "axios";
import { Loading, Message } from 'element-ui';

const instance = axios.create({
  baseURL: "http://localhost:5500",
  timeout: 30000,
});

// 获取 token 的方法，这里的请求不能使用封装的，不然请求一直没有 token 就会一直挂起
async function passParamsGetToken() {}

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  // 这种用 async/await 也可以，更易读一些，原理都是等待请求的发送
  (config) => {
    if (!config.headers.Authorization) {
      // 请求挂起
      return new Promise(async (resolve, reject) => {
        let token = await passParamsGetToken();
        // 为当前请求添加 token
        config.headers.Authorization = token;
        // 为实例添加 token，这样下一个请求也会存在token
        instance.defaults.headers.common["Authorization"] = token;

        loadingInstance = Loading.service({
          fullscreen: true,
          text: "加载中...",
          background: "black",
        });
        resolve(config);
      });
    } else {
      loadingInstance = Loading.service({
        fullscreen: true,
        text: "加载中...",
        background: "black",
      });
      return config;
    }
  },
  (error) => {
    Message.error("请求错误：" + error.message);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingInstance.close();
    return data;
  },
  (error) => {
    loadingInstance.close();
    return Promise.reject(error.response);
  }
);

export default instance;

取消请求

重复请求需要取消，取消请求会走响应拦截器的 error，会和请求重试有冲突

取消请求不是真正意义上的取消，请求已经发送，后端接收到了，只是前端不在响应了
使用表单类的操作，取消请求没用，顶多是获取列表的时候，前端少处理一次操作

import axios from "axios";
import { Loading, Message } from 'element-ui';

const requestMap = new Map();

function setRequestMap(config) {
  requestMap.set(JSON.stringify(config), config);
}

function deleteRequestMap(config) {
  let xLConfig = JSON.stringify(config);
  let hasConfig = null;
  if ((hasConfig = requestMap.get(xLConfig))) {
    // 请求完成后在取消，不影响
    hasConfig.controller.abort();
    requestMap.delete(xLConfig);
  }
}

// 设置控制器，需要先设置控制器，这样添加删除后的序列化字符才可以匹配
function setAbortController(config) {
  const controller = new AbortController();
  config.controller = controller;
  config.signal = controller.signal;
}

const instance = axios.create({
  baseURL: "http://localhost:5500",
  timeout: 30000,
});

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    setAbortController(config);
    deleteRequestMap(config);
    setRequestMap(config);

    loadingInstance = Loading.service({
      fullscreen: true,
      text: "加载中...",
      background: "black",
    });
    return config;
  },
  (error) => {
    Message.error("请求错误：" + error.message);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    deleteRequestMap(response.config);
    loadingInstance.close();
    return response.data;
  },
  (error) => {
    // 重复请求的取消，表示后面肯定有请求，则不需要关闭 loading
    if (axios.isCancel(error)) {
      // console.log("Request canceled", 123123);
      // 其他异常的处理
    } else {
      deleteRequestMap(error.config);
      loadingInstance.close();
    }
    return Promise.reject(error.response);
  }
);

export default instance;

请求重试

请求失败需要重试

// utils/reuqest.js 中
import axios from "axios";
import { Loading, Message } from 'element-ui';

const instance = axios.create({
  baseURL: "http://localhost:5500",
  timeout: 30000,
  retry: 3, // 最大重试次数为 3
  retryDelay: 1000, // 重试时的延迟时间为 1 秒
});

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    loadingInstance = Loading.service({
      fullscreen: true,
      text: config.retryCount ? "请求重试中..." : "加载中...", // 重试后改变 text 显示
      background: "black",
    });
    return config;
  },
  (error) => {
    Message.error("请求错误：" + error.message);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingInstance.close();
    return data;
  },
  (error) => {
    loadingInstance.close();
    const config = error.config;
    // 没有重试的请求直接抛出
    if (!config || !config.retry) {
      return Promise.reject(error);
    }

	// 超过重试次数抛出
    config.retryCount = config.retryCount || 0;
    if (config.retryCount >= config.retry) {
      // 因为每次请求的实例对象都不一样，所以为当前实例添加 retryCount，不会影响其他实例
      return Promise.reject(error);
    }

	// 请求重试
    config.retryCount += 1;
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(instance(config));
      }, config.retryDelay);
    });
  }
);

export default instance;

codeCat!

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue2/3 axios 请求重试、取消请求、loading 串行并行等（分享）

这些代码都是 vue2 项目的，vue3 也通用，改一下 loading 和 message 就好了（主要是 element 的区别）我这里的应用场景是 token，当我发现当前请求没有 token 时，先挂起当前请求然后获取 token，在添加上。在请求响应拦截器里面添加 loading，这样就不需要给每一个请求添加 loading 了。重复请求需要取消，取消请求会走响应拦截器的 error，会和请求重试有冲突。响应状态码配置，更好的给用户提示，这里只设计到响应，就只写了响应拦截。
复制链接

扫一扫