Axios封装实例 meowrain 收录于 前端2025-01-22 约 400 字 预计阅读 2 分钟 目录 AXIOS请求执行过程 请求流程和拦截器 代码 注意 本文最后更新于 2025-01-22,文中内容可能已过时。 AXIOS请求执行过程 请求流程和拦截器 代码 封装好 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 import type { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig, } from "axios"; import axios from "axios"; const handleRequestHeader = (config: InternalAxiosRequestConfig<any>) => { const token = localStorage.getItem("token"); config.headers["Authorization"] = token; console.log("jwtToken获取成功: ", token); }; const handleResponse = (response: AxiosResponse) => {}; const handleNetworkError = (errStatus: number): string => { // HTTP 错误码参考 https://blog.meowrain.cn/api/i/2025/01/22/bTJO3P1737530752562639385.avif let errMessage: string = ""; if (errStatus) { switch (errStatus) { case 400: errMessage = "错误的请求"; break; case 401: errMessage = "未授权,请重新登录"; break; case 403: errMessage = "拒绝访问"; break; case 404: errMessage = "请求错误,未找到该资源"; break; case 405: errMessage = "请求方法未允许"; break; case 408: errMessage = "请求超时"; break; case 500: errMessage = "服务器错误"; break; case 501: errMessage = "网络未实现"; break; case 502: errMessage = "网络错误"; break; case 503: errMessage = "服务不可用"; break; case 504: errMessage = "网络超时"; break; case 505: errMessage = "http版本不支持该请求"; break; default: errMessage = `其他连接错误 --${errStatus}`; } } else { errMessage = "无法连接到服务器!"; } return errMessage; }; const axiosInstance: AxiosInstance = axios.create({ baseURL: app.Api.baseUrl, timeout: app.Api.timeout, }); axiosInstance.interceptors.request.use( (config: InternalAxiosRequestConfig<any>) => { handleRequestHeader(config); return config; } ); axiosInstance.interceptors.response.use( (response: AxiosResponse) => { //对响应数据做处理 return response.data; }, (error: any) => { let errMessage: string = ""; //处理响应错误 if (error.response) { errMessage = handleNetworkError(error.response.status); console.error(errMessage); } else if (error.request) { errMessage = handleNetworkError(0); //无法连接到服务器 // 请求已经发出,但是没有收到响应 } return Promise.reject(new Error(errMessage)); } ); export { axiosInstance }