快捷導(dǎo)航

vue3 ts axios請求封裝,取消請求,失敗重發(fā),權(quán)限控制問題

更新時間：2026年05月18日 10:35:37 作者：瑕疵?

該文介紹了使用TypeScript處理前后端交互常見問題的工具,通過將token添加至請求頭、增加超時請求重試、添加請求取消功能等措施,統(tǒng)一處理網(wǎng)絡(luò)連接不穩(wěn)定、請求超時等異常情況,提高代碼質(zhì)量和維護(hù)性

vue3 ts axios請求封裝,取消請求,失敗重發(fā),權(quán)限控制

用了 TypeScript 進(jìn)行全面支持

針對前后端交互常見問題進(jìn)行了細(xì)致的處理，包括將 token 添加至請求頭、增加超時請求重試、添加請求取消功能等等。

此外，該工具還提供了統(tǒng)一的異常處理機(jī)制，對于常見的網(wǎng)絡(luò)連接不穩(wěn)定、請求超時等異常情況，能夠快速準(zhǔn)確地進(jìn)行處理。

使用該工具

可以提高代碼質(zhì)量和可維護(hù)性

import axios, { AxiosRequestConfig, CancelTokenSource } from 'axios'
import { ElMessage } from 'element-plus';
//用于報錯
import config from "@/config/projectOptions"
//項(xiàng)目整體配置
import router from "@/router";
//權(quán)限跳轉(zhuǎn)
interface AxiosRequestConfigExtended extends AxiosRequestConfig {
  retry: number
  retryDelay: number
}
axios.defaults.baseURL = config.baseUrl//url
const timeout = 5000//超時時間
let timer: number//用于延時重發(fā)請求
const request = axios.create({
  timeout,
  retry: 0, // 重試次數(shù)
  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
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
}, function (error) {
  clearTimeout(timer)//錯誤后清除延時
  // 對響應(yīng)錯誤做點(diǎn)什么
  throw error
});

request.interceptors.response.use(res => {
  if (res.status === 200 && res.data.ok) {//狀態(tài)判斷
    return res.data//正常返回
  } else {
    errorHandle({ response: res })//異常集中處理
    return Promise.reject({ message: 'Unknown response format' });//報錯提示格式錯誤
  }
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
}, async function (error) {
  // 對響應(yīng)錯誤做點(diǎn)什么
  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);
  })
  //等待請求重發(fā)
  return request(error.config)
});

// 錯誤處理
function errorHandle(error: any) {
  let message = ""
  //報錯處理
  if (error.response.data) { //格式判斷
    if ([401, 403].indexOf(error.response.status) > -1) {
      // 對于未授權(quán)或權(quán)限不夠的錯誤，直接跳轉(zhuǎn)到登錄頁面
      message = '登錄過期，請重新登錄'
      setTimeout(() => {
        sessionStorage.clear()
        router.replace({ path: "Login" })
      }, 1000)
    } else if (error.response.data.code) {
      if ([522, 523].indexOf(error.response.data.code) > -1) {
        // 對于未授權(quán)或權(quán)限不夠的錯誤，直接跳轉(zhuǎn)到登錄頁面
        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 = "網(wǎng)絡(luò)連接已斷開，請檢查網(wǎng)絡(luò)"
    } else if (error.message === `timeout of ${timeout}ms exceeded`) {
      message = "請求超時，請檢查網(wǎng)絡(luò)"
    } else if (error.message.indexOf('timeout') > -1) {
      message = "服務(wù)器響應(yīng)超時，請重試"
    } else {
      message = error.message
    }
  } else {
    message = "請求失敗，請稍后重試"
  }
  ElMessage.error(message)
  return Promise.reject(error);
}

export default {
//導(dǎo)出get方法 傳入cancel用于取消請求
  get: (url: string, params?: any, cancel?: CancelTokenSource) => request.get(url, {
    params,
    cancelToken: cancel ? cancel.token : undefined
  }),
  //用于post傳入數(shù)據(jù)識別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
  }),
  //導(dǎo)出刪除
  delete: (url: string, params?: any, cancel?: CancelTokenSource) => request.delete(url, {
    params,
    cancelToken: cancel ? cancel.token : undefined
  })
  //可自行增加
}