Vue3+TypeScript封装axios并进行请求调用的实现

 // http.ts import axios, { AxiosRequestConfig, AxiosResponse } from 'axios' import { ElMessage } from "element-plus" const showStatus = (status: number) => { let message = '' switch (status) { case 400: message = '请求错误(400)' break case 401: message = '未授权，请重新登录(401)' break case 403: message = '拒绝访问(403)' break case 404: message = '请求出错(404)' break case 408: message = '请求超时(408)' break case 500: message = '服务器错误(500)' break case 501: message = '服务未实现(501)' break case 502: message = '网络错误(502)' break case 503: message = '服务不可用(503)' break case 504: message = '网络超时(504)' break case 505: message = 'HTTP版本不受支持(505)' break default: message = `连接出错(${status})!` } return `${message}，请检查网络或联系管理员！` } const service = axios.create({ // 联调 // baseURL: process.env.NODE_ENV === 'production' ? `/` : '/api', baseURL: "/api", headers: { get: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }, post: { 'Content-Type': 'application/json;charset=utf-8' } }, // 是否跨站点访问控制请求 withCredentials: true, timeout: 30000, transformRequest: [(data) => { data = JSON.stringify(data) return data }], validateStatus() { // 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常 return true }, transformResponse: [(data) => { if (typeof data === 'string' && data.startsWith('{')) { data = JSON.parse(data) } return data }] }) // 请求拦截器 service.interceptors.request.use((config: AxiosRequestConfig) => { //获取token，并将其添加至请求头中 let token = localStorage.getItem('token') if(token){ config.headers.Authorization = `${token}`; } return config }, (error) => { // 错误抛到业务代码 error.data = {} error.data.msg = '服务器异常，请联系管理员！' return Promise.resolve(error) }) // 响应拦截器 service.interceptors.response.use((response: AxiosResponse) => { const status = response.status let msg = '' if (status <200 || status>= 300) { // 处理http错误，抛到业务代码 msg = showStatus(status) if (typeof response.data === 'string') { response.data = { msg } } else { response.data.msg = msg } } return response }, (error) => { if (axios.isCancel(error)) { console.log('repeated request: ' + error.message) } else { // handle error code // 错误抛到业务代码 error.data = {} error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！' ElMessage.error(error.data.msg) } return Promise.reject(error) }) export default service 

 // http.ts import axios, { AxiosRequestConfig, AxiosResponse } from 'axios' import qs from "qs" import { ElMessage } from "element-plus" // 声明一个 Map 用于存储每个请求的标识 和 取消函数 const pending = new Map() /** * 添加请求 * @param {Object} config */ const addPending = (config: AxiosRequestConfig) => { const url = [ config.method, config.url, qs.stringify(config.params), qs.stringify(config.data) ].join('&') config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => { if (!pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去 pending.set(url, cancel) } }) } /** * 移除请求 * @param {Object} config */ const removePending = (config: AxiosRequestConfig) => { const url = [ config.method, config.url, qs.stringify(config.params), qs.stringify(config.data) ].join('&') if (pending.has(url)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除 const cancel = pending.get(url) cancel(url) pending.delete(url) } } /** * 清空 pending 中的请求（在路由跳转时调用） */ export const clearPending = () => { for (const [url, cancel] of pending) { cancel(url) } pending.clear() } // 请求拦截器 service.interceptors.request.use((config: AxiosRequestConfig) => { removePending(config) // 在请求开始前，对之前的请求做检查取消操作 addPending(config) // 将当前请求添加到 pending 中 let token = localStorage.getItem('token') if(token){ config.headers.Authorization = `${token}`; } return config }, (error) => { // 错误抛到业务代码 error.data = {} error.data.msg = '服务器异常，请联系管理员！' return Promise.resolve(error) }) // 响应拦截器 service.interceptors.response.use((response: AxiosResponse) => { removePending(response) // 在请求结束后，移除本次请求 const status = response.status let msg = '' if (status <200 || status>= 300) { // 处理http错误，抛到业务代码 msg = showStatus(status) if (typeof response.data === 'string') { response.data = { msg } } else { response.data.msg = msg } } return response }, (error) => { if (axios.isCancel(error)) { console.log('repeated request: ' + error.message) } else { // handle error code // 错误抛到业务代码 error.data = {} error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！' ElMessage.error(error.data.msg) } return Promise.reject(error) }) export default service 

 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Login from '@/views/Login/Login.vue' //引入在axios暴露出的clearPending函数 import { clearPending } from "@/api/axios" .... .... .... const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) router.beforeEach((to, from, next) => { //在跳转路由之前，先清除所有的请求 clearPending() // ... next() }) export default router 

 // 接口响应通过格式 export interface HttpResponse { status: number statusText: string data: { code: number desc: string [key: string]: any } } 

 import Axios from './axios' import { HttpResponse } from '@/@types' /** * @interface loginParams -登录参数 * @property {string} username -用户名 * @property {string} password -用户密码 */ interface LoginParams { username: string password: string } //封装User类型的接口方法 export class UserService { /** * @description 查询User的信息 * @param {number} teamId - 所要查询的团队ID * @return {HttpResponse} result */ static async login(params: LoginParams): Promise { return Axios('/api/user', { method: 'get', responseType: 'json', params: { ...params }, }) } static async resgister(params: LoginParams): Promise { return Axios('/api/user/resgister', { method: 'get', responseType: 'json', params: { ...params }, }) } }