思路

index.ts 我们需要在src的根目录下创建一个axios文件夹，其中创建一个index.ts文件，这个文件主要用来封装axios的配置（实例化请求配置、请求拦截器、相应拦截器）及相应的方法（登录跳转、消息提示、错误处理等）
base.ts 这个文件主要用于项目扩展的情况下 不同模块需要调用不同接口（请求的base地址 baseURL ）而前期做的准备，便于后期的维护
request.ts 主要用于封装基于axios配置的get/post/put/delete等使用方法。
api.ts 在后面的 main.ts 中引入该模块，包括所有接口数据信息写入该文件中。

  1. // index.ts
  2. import axios, { AxiosRequestConfig, Method } from "axios";
  3. import router from "@/router";
  4. import store from "@/store";
  5. import { message } from 'ant-design-vue'
  6. import { storage } from "../storage/storage";
  7. import { dataList } from "@/components/aspin/data";
  9. /** 
  10.  * 跳转登录页
  11.  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  12.  */
  13. const toLogin = () => {
  14.   router.replace({
  15.     name: 'LoginPage',
  16.   });
  17. }
  19. /** 
  20.  * 请求失败后的错误统一处理 
  21.  * @param {Number} status 请求失败的状态码
  22.  */
  23. const errorHandle = (status: number, other: string) => {
  24.   // 状态码判断
  25.   switch (status) {
  27.     case 302: message.error('接口重定向了！');
  28.       break;
  29.     case 400:
  30.       message.error("发出的请求有错误，服务器没有进行新建或修改数据的操作==>" + status)
  31.       break;
  32.     // 401: 未登录
  33.     // 未登录则跳转登录页面，并携带当前页面的路径
  34.     // 在登录成功后返回当前页面，这一步需要在登录页操作。                
  35.     case 401: //重定向
  36.       message.error("token:登录失效==>" + status + ":" + store.state.Roles)
  37.       storage.remove(store.state.Roles)
  38.       storage.get(store.state.Roles)
  39.       router.replace({
  40.         path: '/Login',
  41.       });
  42.       break;
  43.     // 403 token过期
  44.     // 清除token并跳转登录页
  45.     case 403:
  46.       message.error("登录过期,用户得到授权，但是访问是被禁止的==>" + status)
  47.       // store.commit('token', null);
  48.       setTimeout(() => {
  49.         router.replace({
  50.           path: '/Login',
  51.         });
  52.       }, 1000);
  53.       break;
  54.     case 404:
  55.       message.error("网络请求不存在==>" + status)
  56.       break;
  57.     case 406:
  58.       message.error("请求的格式不可得==>" + status)
  59.       break;
  60.     case 408: message.error(" 请求超时！")
  61.       break;
  62.     case 410:
  63.       message.error("请求的资源被永久删除，且不会再得到的==>" + status)
  64.       break;
  65.     case 422:
  66.       message.error("当创建一个对象时，发生一个验证错误==>" + status)
  67.       break;
  68.     case 500:
  69.       message.error("服务器发生错误，请检查服务器==>" + status)
  70.       break;
  71.     case 502:
  72.       message.error("网关错误==>" + status)
  73.       break;
  74.     case 503:
  75.       message.error("服务不可用，服务器暂时过载或维护==>" + status)
  76.       break;
  77.     case 504:
  78.       message.error("网关超时==>" + status)
  79.       break;
  80.     default:
  81.       message.error("其他错误错误==>" + status)
  82.   }
  83. }
  85. // 定义接口
  86. interface PendingType {
  87.   url?: string;
  88.   method?: Method;
  89.   params: any;
  90.   data: any;
  91.   cancel: any;
  92. }
  93. // 取消重复请求
  94. const pending: Array<PendingType> = [];
  95. const CancelToken = axios.CancelToken;
  97. // 移除重复请求
  98. const removePending = (config: AxiosRequestConfig) => {
  99.   for (const key in pending) {
  100.     const item: number = +key;
  101.     const list: PendingType = pending[key];
  102.     // 当前请求在数组中存在时执行函数体
  103.     if (list.url === config.url && list.method === config.method && JSON.stringify(list.params) === JSON.stringify(config.params) && JSON.stringify(list.data) === JSON.stringify(config.data)) {
  104.       // 执行取消操作
  105.       list.cancel('操作太频繁，请稍后再试');
  106.       // 从数组中移除记录
  107.       pending.splice(item, 1);
  108.     }
  109.   }
  110. };
  112. /* 实例化请求配置 */
  113. const instance = axios.create({
  114.   headers: {
  115.     //php 的 post 传输请求头一定要这个 不然报错 接收不到值
  116.     "Content-Type": "application/json;charset=UTF-8",
  117.     "Access-Control-Allow-Origin-Type": '*'
  118.   },
  119.   // 请求时长
  120.   timeout: 1000 * 30,
  121.   // 请求的base地址 TODO:这块以后根据不同的模块调不同的api
  122.   baseURL: process.env.VUE_APP_API_URL,
  123.   //     ? "测试"
  124.   //     : "正式",
  125.   // 表示跨域请求时是否需要使用凭证
  126.   withCredentials: false,
  127. })
  129. /** 
  130.  * 请求拦截器 
  131.  * 每次请求前，如果存在token则在请求头中携带token 
  132.  */
  133. instance.interceptors.request.use(
  134.   config => {
  136.     removePending(config);
  137.     config.cancelToken = new CancelToken((c) => {
  138.       pending.push({ url: config.url, method: config.method, params: config.params, data: config.data, cancel: c });
  139.     });
  140.     // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
  141.     // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
  142.     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
  143.     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
  144.     // const token = store.state.token;
  145.     // localStorage.setItem('token', token);
  147.     if (storage.get(store.state.Roles)) {
  148.       store.state.Roles
  149.       config.headers.Authorization = storage.get(store.state.Roles);
  150.     }
  151.     return config;
  152.   },
  153.   error => {
  154.     message.error(error.data.error.message);
  155.     return Promise.reject(error.data.error.message);
  156.   }
  158. )
  160. // 响应拦截器
  161. instance.interceptors.response.use(function (config) {
  163.   dataList.show = true
  164.   removePending(config.config);
  165.   // 请求成功
  166.   if (config.status === 200 || config.status === 204) {
  167.     setTimeout(() => {
  168.       dataList.show = false
  169.     }, 400)
  170.     return Promise.resolve(config);
  171.   } else {
  172.     return Promise.reject(config);
  173.   }
  174.   // 请求失败
  175. }, function (error) {
  177.   const { response } = error;
  178.   if (response) {
  179.     errorHandle(response.status, response.data.message);
  181.     // 超时重新请求
  182.     const config = error.config;
  183.     // 全局的请求次数,请求的间隙
  184.     const [RETRY_COUNT, RETRY_DELAY] = [3, 1000];
  186.     if (config && RETRY_COUNT) {
  187.       // 设置用于跟踪重试计数的变量
  188.       config.__retryCount = config.__retryCount || 0;
  189.       // 检查是否已经把重试的总数用完
  190.       if (config.__retryCount >= RETRY_COUNT) {
  191.         return Promise.reject(response || { message: error.message });
  192.       }
  193.       // 增加重试计数
  194.       config.__retryCount++;
  195.       // 创造新的Promise来处理指数后退
  196.       const backoff = new Promise<void>((resolve) => {
  197.         setTimeout(() => {
  198.           resolve();
  199.         }, RETRY_DELAY || 1);
  200.       });
  201.       // instance重试请求的Promise
  202.       return backoff.then(() => {
  203.         return instance(config);
  204.       });
  205.     }
  207.     return Promise.reject(response);
  208.   } else {
  209.     // 处理断网的情况
  210.     // eg:请求超时或断网时，更新state的network状态
  211.     // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
  212.     // 后续增加断网情况下做的一些操作
  213.     store.commit('networkState', false);
  214.   }
  215. }
  216. )
  217. // 只需要考虑单一职责，这块只封装axios
  218. export default instance
  1. // base.ts
  2. export class Base {
  3.   /* 公共模块 */
  4.   static env = process.env.NODE_ENV === "development"
  5.     ? "http://localhost:8087"
  6.     : "https://produceCommon.com(生产线地址)"
  7. }

也可以直接在index.ts中设置这样就不需要base.ts

  1. const instance = axios.create({
  2.   // 请求的base地址 TODO:这块以后根据不同的模块调不同的api
  3.   baseURL: process.env.VUE_APP_API_URL,
  4. })

需要配置根目录
.env.development

  1.      NODE_ENV = 'development'
  2.       # VUE_APP_API_URL = 'https://localhost:5001/'
  3.     VUE_APP_API_URL = 'http://localhost:8087/'

.env.production

  1. # 生产环境的请求接口
  2. NODE_ENV = 'production'
  3. VUE_APP_API_URL = 'http://129.xxxxx/'
  1. // request.ts
  2. import axios from "./index";
  3. import qs from "qs";
  5. export class Request {
  6.   /**
  7.    * get方法
  8.    * @param {string} url 路径
  9.    * @param {object} params 参数
  10.    */
  11.   static get = (url: string, params?: any) => {
  12.     return new Promise((resolve, reject) => {
  13.       axios.get(url, { params: params }).then(res => {
  14.         resolve(res);
  15.       }).catch(err => {
  16.         reject(err);
  17.       })
  18.     })
  19.   }
  21.   static post = (url: string, params?: any) => {
  22.     return new Promise((resolve, reject) => {
  23.       axios.post(url, qs.stringify(params)).then(res => {
  24.         resolve(res);
  25.       }).catch(err => {
  26.         reject(err);
  27.       })
  28.     })
  29.   }
  30. }
  1. // 其中使用 install 的目的在于 ts在main.ts中 
  2. // 不能通过Vue.prototype.$Api这个方式直接调用
  3. //，在全局方法中会说到使用 插件的方式去挂载。
  4. // api.ts
  5. import { Base } from "./base";
  6. import { Request } from "./request";
  8. class api {
  9.   /* api接口模块 */
  10.   public static article = {
  11.      // 直接在index.ts中设置不需要Base模块
  12.     genre: () => Request.get('/api/SnArticle/GetCountAsync'),
  13.      // 基于Base模块封装调用
  14.     genres: () => Request.get(`${Base.env}/api/SnArticle/GetCountAsync`),
  15.   }
  16. }
  17. export {
  18.   api
  19. }
  1. import { api } from '../../utils/api/api'
  2. import { onMounted } from 'vue'
  3. onMounted(async () => {
  4.   await QueryAll()
  5.   api.article.genre().then((res: any) => {
  6.     console.log('genre' + res.data)
  7.   })
  8.   api.article.genres().then((res: any) => {
  9.     console.log('genres' + res.data)
  10.   })
  11. })