vue3 ts axios 请求封装 取消请求 失败重发 权限控制

用了 TypeScript 进行全面支持，针对前后端交互常见问题进行了细致的处理，包括将 token 添加至请求头、增加超时请求重试、添加请求取消功能等等。此外，该工具还提供了统一的异常处理机制，对于常见的网络连接不稳定、请求超时等异常情况，能够快速准确地进行处理。

使用该工具，可以提高代码质量和可维护性

import axios, { AxiosRequestConfig, CancelTokenSource } from 'axios'
import { ElMessage } from 'element-plus';
//用于报错
import config from "@/config/projectOptions"
//项目整体配置
import router from "@/router";
//权限跳转
interface AxiosRequestConfigExtended extends AxiosRequestConfig {
  retry: number
  retryDelay: number
}
axios.defaults.baseURL = config.baseUrl//url
const timeout = 5000//超时时间
let timer: number//用于延时重发请求
const request = axios.create({
  timeout,
  retry: 0, // 重试次数
  retryDelay: timeout // 重试间隔 
} as AxiosRequestConfigExtended);

request.interceptors.request.use(config => {
  config.headers && (config.headers.token = sessionStorage.getItem('token') || "")//填写token
  timer = window.setTimeout(() => {
    config.cancelToken = axios.CancelToken.source().token//用于取消请求
  }, timeout)
  return config
  // 对响应数据做点什么
}, function (error) {
  clearTimeout(timer)//错误后清除延时
  // 对响应错误做点什么
  throw error
});

request.interceptors.response.use(res => {
  if (res.status === 200 && res.data.ok) {//状态判断
    return res.data//正常返回
  } else {
    errorHandle({ response: res })//异常集中处理
    return Promise.reject({ message: 'Unknown response format' });//报错提示格式错误
  }
  // 对响应数据做点什么
}, async function (error) {
  // 对响应错误做点什么
  if (!error.config || !error.config.retry || error.response.data) {
    return errorHandle(error)
  }
  error.config.retry -= 1//记录请求
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve("");
    }, error.config.retryDelay);
  })
  //等待请求重发
  return request(error.config)
});

// 错误处理
function errorHandle(error: any) {
  let message = ""
  //报错处理
  if (error.response.data) { //格式判断
    if ([401, 403].indexOf(error.response.status) > -1) {
      // 对于未授权或权限不够的错误，直接跳转到登录页面
      message = '登录过期，请重新登录'
      setTimeout(() => {
        sessionStorage.clear()
        router.replace({ path: "Login" })
      }, 1000)
    } else if (error.response.data.code) {
      if ([522, 523].indexOf(error.response.data.code) > -1) {
        // 对于未授权或权限不够的错误，直接跳转到登录页面
        message = error.response.data.message
        setTimeout(() => {
          sessionStorage.clear()
          router.replace({ path: "Login" })
        }, 1000)
      } else {
        message = message = error.response.data.message
      }
    } else if (error.message === "Network Error") {
      message = "网络连接已断开，请检查网络"
    } else if (error.message === `timeout of ${timeout}ms exceeded`) {
      message = "请求超时，请检查网络"
    } else if (error.message.indexOf('timeout') > -1) {
      message = "服务器响应超时，请重试"
    } else {
      message = error.message
    }
  } else {
    message = "请求失败，请稍后重试"
  }
  ElMessage.error(message)
  return Promise.reject(error);
}

export default {
//导出get方法 传入cancel用于取消请求
  get: (url: string, params?: any, cancel?: CancelTokenSource) => request.get(url, {
    params,
    cancelToken: cancel ? cancel.token : undefined
  }),
  //用于post传入数据识别params||body
  post: (url: string, data?: { params?: any, data?: any }, cancel?: CancelTokenSource) => request.post(url, data?.data, {
    params: data?.params,
    cancelToken: cancel ? cancel.token : undefined
  }),
  //导出删除
  delete: (url: string, params?: any, cancel?: CancelTokenSource) => request.delete(url, {
    params,
    cancelToken: cancel ? cancel.token : undefined
  })
  //可自行增加
}