可以查看axios的中文文档，地址如下
https://www.axios-http.cn/

为什么要对axios进行二次封装：

由于自带的axios不能满足我们的需求，需要对其进行二次封装，方便程序员使用

  1. // 引入axios
  2. import axios from 'axios'
  3. // @ts-ignore
  4. import { ElMessage } from "element-plus";
  5. import (GET_TOKEN) from ＇./token.ts＇
  6. // 第一步：利用axios对象的create方法，去创建axios实例（其他的配置:基础路径、超时时间）
  8. const requeset = axios.create({
  9.   // 基础路径
  10.   baseURL: import.meta.env.VITE_APP_BASE_API,//后期可以换成自己的项目地址
  11.   // 设置超时时间
  12.   timeout: 5000,
  13. })
  15. // // 第二步：给request实例添加请求拦截器
  16. requeset.interceptors.request.use((config)=>{
  17.   //获取token
  18.   const token = GET_TOKEN()
  19.   if(token){
  20.     config.header.token = token
  21.   }
  23.   // 返回配置对象
  24.   return config;
  25. })
  28. // 第三步：给request实例添加响应拦截器
  29. requeset.interceptors.response.use((response)=>{
  30.     // 成功的回调
  31.     // 简化数据
  33.     return response.data
  34.   },
  35.   (error)=>{
  36.     // 失败的回调：处理http网络错误
  37.     // 定义一个变量，存储网络错误信息
  38.     let message = '';
  39.     // http状态码
  40.     let status = error.response.status
  41.     switch(status){
  42.       case 401:
  43.         message = 'TOKEN过期';
  44.         break;
  45.       case 403:
  46.         message = '无权访问';
  47.         break;
  48.       case 404:
  49.         message = '请求地址错误';
  50.         break;
  51.       case 500:
  52.         message = '服务器出现问题';
  53.         break;
  54.       default:
  55.         message = '网络出现错误';
  56.         break;
  57.     }
  58.     // 提示错误信息
  59.     ElMessage({
  60.       type:'error',
  61.       message
  62.     })
  63.     return Promise.reject(error);
  64.   }
  65. )
  67. // 对外暴露
  68. export default requeset;

而在开发阶段，我们可以使用上面对axios的二次封装来发送请求获取数据，在生产环境中为了提高用户的体验，减小网络带宽，减小服务器压力，我们会在发请求前对用户的地址进行判断，对网络的错误进行统一的错误提示
1.统一错误处理

  1. import axios from "axios";
  2. import { ElMessage } from "element-plus";
  3. import { useUserStore } from "../../store/modules/user";
  5. // 功能失败的错误原因
  6. export const authErrMessage: any = {
  7.   10031: "登录失效，需要重新登录",
  8.   10032: "您太久没登录，请重新登录~",
  9.   10033: "账户未绑定角色，请联系管理员绑定角色",
  10.   10034: "该用户未注册，请联系管理员注册用户",
  11.   10035: "code 无法获取对应第三方平台用户",
  12.   10036: "该账户未关联员工，请联系管理员做关联",
  13.   10037: "账号已无效",
  14.   10038: "账号未找到",
  15. };
  17. // 请求失败的错误原因
  18. export const networkErrMessage: any = {
  19.   400: "错误的请求",
  20.   401: "未授权，请重新登录",
  21.   403: "拒绝访问",
  22.   404: "未找到该资源",
  23.   405: "请求方法未允许",
  24.   408: "请求超时",
  25.   500: "服务器端出错",
  26.   502: "网络错误",
  27.   503: "服务不可用",
  28.   504: "网络超时",
  29.   505: "http版本不支持该请求",
  30. };
  32. const request = axios.create({
  33.   // 需要在 .env.* 文件中定义环境变量才能使用
  34.   baseURL: import.meta.env.VITE_BASE_URL,
  35.   headers: {},
  36.   timeout: 20000,
  37. });
  40. request.interceptors.request.use((config) => {
  41.   const token = useUserStore().token;
  42.   if (token) {
  43.     config.headers.token = token;
  44.   }
  45.   return config;
  46. });
  48. request.interceptors.response.use(
  49.   (response) => {
  50.     const code = response.data.code;
  51.     if (code === 20000) {
  52.       return response.data;
  53.     } else {
  54.       let errMessage = authErrMessage[code];
  55.       if (errMessage) {
  56.         // 功能出错，需要特殊处理，比如要退出登录等
  57.         // useUserStore().logout();
  58.       } else {
  59.         errMessage = response.data.message;
  60.       }
  61.       ElMessage.error(errMessage);
  62.       return Promise.reject(errMessage);
  63.     }
  64.   },
  65.   (error) => {
  66.     let errMessage = "未知错误，请联系管理员解决";
  67.     if (error.response) {
  68.       // error.response有值，说明服务器有响应，响应结果是错误的，要根据响应状态码error.response.status来提示错误
  69.       errMessage = networkErrMessage[error.response.status];
  70.     } else {
  71.       // error.response没有值，说明服务器没有响应，请求在客户端就失败了，要根据浏览器提示的错误信息来处理
  72.       if (error.message.indexOf("timeout") > -1) {
  73.         // 请求超时
  74.         errMessage = "当前网络环境不稳定，请切换4/5G网络或WIFI网络试试";
  75.       } else if (error.message.indexOf("Network") > -1) {
  76.         // 断网了
  77.         errMessage = "没有检测到网络，请打开网络链接试试";
  78.       } else if (error.message.indexOf("canceled") > -1) {
  79.         errMessage = "请求取消了";
  80.       }
  81.     }
  82.     ElMessage.error(errMessage);
  83.     return Promise.reject(errMessage);
  84.   }
  85. );
  87. export default request;

2.取消重复请求
每个请求根据请求的配置项生成一个相应key（相同的请求生成的key相同，不同请求生成的key不同）
1.生成key

  1. // 所有请求列表容器
  2. //每个请求生成的key及key对应的值cancel
  3. const requestListMap = new Map();
  5. /**
  6.  * 每一个请求生成一个key
  7.  * @param config 请求配置对象
  8.  * @returns 唯一的key
  9.  */
  10. function getRequestKey(config: AxiosRequestConfig) {
  11.   let { url, method, params = {}, data = {} } = config;
  12.   return [url, method, JSON.stringify(params), JSON.stringify(data)].join("&");
  13. }

删除key

  1. /**
  2.  * 删除请求key
  3.  * @param config
  4.  */
  5. function removeRequestKey(config: AxiosRequestConfig) {
  6.   const requestKey = getRequestKey(config);
  7.   if (requestListMap.has(requestKey)) {
  8.     const cancel = requestListMap.get(requestKey);
  9.     cancel(); // 取消请求
  10.     requestListMap.delete(requestKey);
  11.   }
  12. }

添加key

  1. const CancelToken = axios.CancelToken;
  3. /**
  4.  * 添加请求key
  5.  * @param config
  6.  */
  7. function addRequestKey(config: AxiosRequestConfig) {
  8.   const requestKey = getRequestKey(config);
  9.   config.cancelToken = new CancelToken((cancel) => {
  10.     if (!requestListMap.has(requestKey)) {
  11.       requestListMap.set(requestKey, cancel);
  12.     }
  13.   });
  14. }

请求完成，在响应拦截器中需要将当前请求给删除

  1. import axios from "axios";
  2. import type { AxiosRequestConfig } from "axios";
  3. import { ElMessage } from "element-plus";
  4. import { useUserStore } from "../store/modules/user";
  6. // 功能失败的错误原因
  7. export const authErrMessage: any = {
  8.   10031: "登录失效，需要重新登录",
  9.   10032: "您太久没登录，请重新登录~",
  10.   10033: "账户未绑定角色，请联系管理员绑定角色",
  11.   10034: "该用户未注册，请联系管理员注册用户",
  12.   10035: "code 无法获取对应第三方平台用户",
  13.   10036: "该账户未关联员工，请联系管理员做关联",
  14.   10037: "账号已无效",
  15.   10038: "账号未找到",
  16. };
  18. // 请求失败的错误原因
  19. export const networkErrMessage: any = {
  20.   400: "错误的请求",
  21.   401: "未授权，请重新登录",
  22.   403: "拒绝访问",
  23.   404: "未找到该资源",
  24.   405: "请求方法未允许",
  25.   408: "请求超时",
  26.   500: "服务器端出错",
  27.   502: "网络错误",
  28.   503: "服务不可用",
  29.   504: "网络超时",
  30.   505: "http版本不支持该请求",
  31. };
  33. // 所有请求列表容器
  34. const requestListMap = new Map();
  36. /**
  37.  * 每一个请求生成一个唯一的key
  38.  * @param config 请求配置对象
  39.  * @returns 唯一的key
  40.  */
  41. function getRequestKey(config: AxiosRequestConfig) {
  42.   const { url, method, params = {}, data = {} } = config;
  43.   return [url, method, JSON.stringify(params), JSON.stringify(data)].join("&");
  44. }
  46. const CancelToken = axios.CancelToken;
  48. /**
  49.  * 添加请求key
  50.  * @param config
  51.  */
  52. function addRequestKey(config: AxiosRequestConfig) {
  53.   const requestKey = getRequestKey(config);
  54.   config.cancelToken = new CancelToken((cancel) => {
  55.     if (!requestListMap.has(requestKey)) {
  56.       requestListMap.set(requestKey, cancel);
  57.     }
  58.   });
  59. }
  61. /**
  62.  * 删除请求key
  63.  * @param config
  64.  */
  65. function removeRequestKey(config: AxiosRequestConfig) {
  66.   const requestKey = getRequestKey(config);
  67.   if (requestListMap.has(requestKey)) {
  68.     const cancel = requestListMap.get(requestKey);
  69.     cancel();
  70.     requestListMap.delete(requestKey);
  71.   }
  72. }
  74. const request = axios.create({
  75.   // 需要在 .env.* 文件中定义环境变量才能使用
  76.   baseURL: import.meta.env.VITE_BASE_URL,
  77.   headers: {},
  78.   timeout: 20000,
  79. });
  81. request.interceptors.request.use((config) => {
  82.   const token = useUserStore().token;
  83.   if (token) {
  84.     config.headers.token = token;
  85.   }
  86.   removeRequestKey(config); // 删除key
  87.   addRequestKey(config); // 添加key
  88.   return config;
  89. });
  91. request.interceptors.response.use(
  92.   (response) => {
  93.     removeRequestKey(response.config); // 删除key
  94.     const code = response.data.code;
  95.     if (code === 20000) {
  96.       return response.data;
  97.     } else {
  98.       let errMessage = authErrMessage[code];
  99.       if (errMessage) {
  100.         // 功能出错，需要特殊处理，比如要退出登录等
  101.         // useUserStore().logout();
  102.       } else {
  103.         errMessage = response.data.message;
  104.       }
  105.       ElMessage.error(errMessage);
  106.       return Promise.reject(errMessage);
  107.     }
  108.   },
  109.   (error) => {
  110.     error.config && removeRequestKey(error.config); // 删除key
  111.     let errMessage = "未知错误，请联系管理员解决";
  112.     if (error.response) {
  113.       // error.response有值，说明服务器有响应，响应结果是错误的，要根据响应状态码error.response.status来提示错误
  114.       errMessage = networkErrMessage[error.response.status];
  115.     } else {
  116.       // error.response没有值，说明服务器没有响应，请求在客户端就失败了，要根据浏览器提示的错误信息来处理
  117.       if (error.message.indexOf("timeout") > -1) {
  118.         // 请求超时
  119.         errMessage = "当前网络环境不稳定，请切换4/5G网络或WIFI网络试试";
  120.       } else if (error.message.indexOf("Network") > -1) {
  121.         // 断网了
  122.         errMessage = "没有检测到网络，请打开网络链接试试";
  123.       } else if (error.message.indexOf("canceled") > -1) {
  124.         errMessage = "请求取消了";
  125.       }
  126.     }
  127.     ElMessage.error(errMessage);
  128.     return Promise.reject(errMessage);
  129.   }
  130. );
  132. export default request;

取消上一个页面的请求

  1. 存储请求时，需要将取消请求的方法和当前路由路径一起储存
  2. 当路由跳转时，判断请求列表中的请求地址和要去的路由地址是否时同一个，如果不是，就要取消 ```typescript import axios from “axios”; import type { AxiosRequestConfig } from “axios”; import { ElMessage } from “element-plus”; import { useUserStore } from “../store/modules/user”;

// 功能失败的错误原因 export const authErrMessage: any = { 10031: “登录失效，需要重新登录”, 10032: “您太久没登录，请重新登录~”, 10033: “账户未绑定角色，请联系管理员绑定角色”, 10034: “该用户未注册，请联系管理员注册用户”, 10035: “code 无法获取对应第三方平台用户”, 10036: “该账户未关联员工，请联系管理员做关联”, 10037: “账号已无效”, 10038: “账号未找到”, };

// 请求失败的错误原因 export const networkErrMessage: any = { 400: “错误的请求”, 401: “未授权，请重新登录”, 403: “拒绝访问”, 404: “未找到该资源”, 405: “请求方法未允许”, 408: “请求超时”, 500: “服务器端出错”, 502: “网络错误”, 503: “服务不可用”, 504: “网络超时”, 505: “http版本不支持该请求”, };

// 所有请求列表容器 const requestListMap = new Map();

/**

  • 每一个请求生成一个唯一的key
  • @param config 请求配置对象
  • @returns 唯一的key */ function getRequestKey(config: AxiosRequestConfig) { const { url, method, params = {}, data = {} } = config; return [url, method, JSON.stringify(params), JSON.stringify(data)].join(“&”); }

const CancelToken = axios.CancelToken;

/**

  • 添加请求key
  • @param config */ function addRequestKey(config: AxiosRequestConfig) { const requestKey = getRequestKey(config); config.cancelToken = new CancelToken((cancel) => { if (!requestListMap.has(requestKey)) { requestListMap.set(requestKey, {
    1.  cancel,
    2.  pathname: window.location.pathname,
    }); } }); }

/**

  • 删除请求key
  • @param config */ function removeRequestKey(config: AxiosRequestConfig) { const requestKey = getRequestKey(config); if (requestListMap.has(requestKey)) { const { cancel } = requestListMap.get(requestKey); cancel(); requestListMap.delete(requestKey); } }

const request = axios.create({ // 需要在 .env.* 文件中定义环境变量才能使用 baseURL: import.meta.env.VITE_BASE_URL, headers: {}, timeout: 20000, });

request.interceptors.request.use((config) => { const token = useUserStore().token; if (token) { config.headers.token = token; } removeRequestKey(config); // 删除key addRequestKey(config); // 添加key return config; });

request.interceptors.response.use( (response) => { removeRequestKey(response.config); // 删除key const code = response.data.code; if (code === 20000) { return response.data; } else { let errMessage = authErrMessage[code]; if (errMessage) { // 功能出错，需要特殊处理，比如要退出登录等 // useUserStore().logout(); } else { errMessage = response.data.message; } ElMessage.error(errMessage); return Promise.reject(errMessage); } }, (error) => { error.config && removeRequestKey(error.config); // 删除key let errMessage = “未知错误，请联系管理员解决”; if (error.response) { // error.response有值，说明服务器有响应，响应结果是错误的，要根据响应状态码error.response.status来提示错误 errMessage = networkErrMessage[error.response.status]; } else { // error.response没有值，说明服务器没有响应，请求在客户端就失败了，要根据浏览器提示的错误信息来处理 if (error.message.indexOf(“timeout”) > -1) { // 请求超时 errMessage = “当前网络环境不稳定，请切换4/5G网络或WIFI网络试试”; } else if (error.message.indexOf(“Network”) > -1) { // 断网了 errMessage = “没有检测到网络，请打开网络链接试试”; } else if (error.message.indexOf(“canceled”) > -1) { errMessage = “请求取消了”; } } ElMessage.error(errMessage); return Promise.reject(errMessage); } );

export { requestListMap };

export default request;

  1. <a name="lGn8D"></a>
  2. ## Axios的二次封装最终版
  3. ```typescript
  4. import axios from "axios";
  5. import type { AxiosRequestConfig } from "axios";
  6. import { ElMessage } from "element-plus";
  7. import { useUserStore } from "../store/modules/user";
  9. // 功能失败的错误原因
  10. export const authErrMessage: any = {
  11.   10031: "登录失效，需要重新登录",
  12.   10032: "您太久没登录，请重新登录~",
  13.   10033: "账户未绑定角色，请联系管理员绑定角色",
  14.   10034: "该用户未注册，请联系管理员注册用户",
  15.   10035: "code 无法获取对应第三方平台用户",
  16.   10036: "该账户未关联员工，请联系管理员做关联",
  17.   10037: "账号已无效",
  18.   10038: "账号未找到",
  19. };
  21. // 请求失败的错误原因
  22. export const networkErrMessage: any = {
  23.   400: "错误的请求",
  24.   401: "未授权，请重新登录",
  25.   403: "拒绝访问",
  26.   404: "未找到该资源",
  27.   405: "请求方法未允许",
  28.   408: "请求超时",
  29.   500: "服务器端出错",
  30.   502: "网络错误",
  31.   503: "服务不可用",
  32.   504: "网络超时",
  33.   505: "http版本不支持该请求",
  34. };
  36. // 所有请求列表容器
  37. const requestListMap = new Map();
  39. /**
  40.  * 每一个请求生成一个唯一的key
  41.  * @param config 请求配置对象
  42.  * @returns 唯一的key
  43.  */
  44. function getRequestKey(config: AxiosRequestConfig) {
  45.   const { url, method, params = {}, data = {} } = config;
  46.   return [url, method, JSON.stringify(params), JSON.stringify(data)].join("&");
  47. }
  49. const CancelToken = axios.CancelToken;
  51. /**
  52.  * 添加请求key
  53.  * @param config
  54.  */
  55. function addRequestKey(config: AxiosRequestConfig) {
  56.   const requestKey = getRequestKey(config);
  57.   config.cancelToken = new CancelToken((cancel) => {
  58.     if (!requestListMap.has(requestKey)) {
  59.       requestListMap.set(requestKey, {
  60.         cancel,
  61.         pathname: window.location.pathname,
  62.       });
  63.     }
  64.   });
  65. }
  67. /**
  68.  * 删除请求key
  69.  * @param config
  70.  */
  71. function removeRequestKey(config: AxiosRequestConfig) {
  72.   const requestKey = getRequestKey(config);
  73.   if (requestListMap.has(requestKey)) {
  74.     const { cancel } = requestListMap.get(requestKey);
  75.     cancel();
  76.     requestListMap.delete(requestKey);
  77.   }
  78. }
  80. const request = axios.create({
  81.   // 需要在 .env.* 文件中定义环境变量才能使用
  82.   baseURL: import.meta.env.VITE_BASE_URL,
  83.   headers: {},
  84.   timeout: 20000,
  85. });
  87. request.interceptors.request.use((config) => {
  88.   const token = useUserStore().token;
  89.   if (token) {
  90.     config.headers.token = token;
  91.   }
  92.   removeRequestKey(config); // 删除key
  93.   addRequestKey(config); // 添加key
  94.   return config;
  95. });
  97. request.interceptors.response.use(
  98.   (response) => {
  99.     removeRequestKey(response.config); // 删除key
  100.     const code = response.data.code;
  101.     if (code === 20000) {
  102.       return response.data;
  103.     } else {
  104.       let errMessage = authErrMessage[code];
  105.       if (errMessage) {
  106.         // 功能出错，需要特殊处理，比如要退出登录等
  107.         // useUserStore().logout();
  108.       } else {
  109.         errMessage = response.data.message;
  110.       }
  111.       ElMessage.error(errMessage);
  112.       return Promise.reject(errMessage);
  113.     }
  114.   },
  115.   (error) => {
  116.     error.config && removeRequestKey(error.config); // 删除key
  117.     let errMessage = "未知错误，请联系管理员解决";
  118.     if (error.response) {
  119.       // error.response有值，说明服务器有响应，响应结果是错误的，要根据响应状态码error.response.status来提示错误
  120.       errMessage = networkErrMessage[error.response.status];
  121.     } else {
  122.       // error.response没有值，说明服务器没有响应，请求在客户端就失败了，要根据浏览器提示的错误信息来处理
  123.       if (error.message.indexOf("timeout") > -1) {
  124.         // 请求超时
  125.         errMessage = "当前网络环境不稳定，请切换4/5G网络或WIFI网络试试";
  126.       } else if (error.message.indexOf("Network") > -1) {
  127.         // 断网了
  128.         errMessage = "没有检测到网络，请打开网络链接试试";
  129.       } else if (error.message.indexOf("canceled") > -1) {
  130.         errMessage = "请求取消了";
  131.       }
  132.     }
  133.     ElMessage.error(errMessage);
  134.     return Promise.reject(errMessage);
  135.   }
  136. );
  138. export { requestListMap };
  140. export default request;

开发环境的判断，需要安装第三方包

  1. pnpm i @type/node