request.ts 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import axios, { AxiosRequestConfig } from "axios";
  2. import { showLoadingToast, closeToast, showFailToast } from 'vant';
  3. import { useCookies } from '@vueuse/integrations/useCookies';
  4. const { VITE_TOKEN_KEY } = import.meta.env;
  5. const token = useCookies().get(VITE_TOKEN_KEY as string);
  6. interface ResponseData<T = any> {
  7. code: number;
  8. message: string;
  9. data: T;
  10. openid?:string
  11. }
  12. let loadingCount = 0
  13. const MODE = import.meta.env.MODE; // 环境变量
  14. console.log("MODE: ", MODE);
  15. const service = axios.create({
  16. // 开发环境请求本地代理,生产环境请求域名
  17. // 开发环境在接口面前自动加上 api,配合 本地代理使用,无需在每个接口前写 /api
  18. // baseURL: MODE === "development" ? "/service" : "http://ab.svip52.com/api",
  19. headers: {
  20. "X-Requested-With": "XMLHttpRequest",
  21. "Content-Type": "application/json",
  22. },
  23. });
  24. // 两层泛型,一层是 axios 提供的,AxiosRequestConfig
  25. // 一层是自定义的,ResponseData<T>
  26. // 实现响应的 data 以及 data.data 的类型提示
  27. // request 函数传入一个 data.data 的类型
  28. const request = async <T = any>(
  29. config: AxiosRequestConfig
  30. ): Promise<ResponseData<T>> => {
  31. // 请求前加上 token
  32. service.interceptors.request.use((config) => {
  33. addToast()
  34. console.log('confige',config)
  35. if (config?.headers) {
  36. config.headers.wxOpenId = token || "";
  37. }
  38. return config;
  39. });
  40. //response拦截器
  41. service.interceptors.response.use(
  42. response => {
  43. reduce()
  44. return response;
  45. },
  46. error => {
  47. reduce()
  48. return Promise.reject(error)
  49. }
  50. );
  51. const { data } = await service.request<ResponseData<T>>(config);
  52. // 请求失败
  53. console.log('request',data)
  54. // reduce()
  55. if (typeof data !== "object") {
  56. showFailToast('服务器错误,请联系管理员');
  57. return Promise.reject(data);
  58. }
  59. if (data.code != 200) {
  60. if (data.message) showFailToast(data.message);
  61. // 401,token 过期
  62. if (data.code == 401) {
  63. localStorage.removeItem("token");
  64. location.href = "#/login";
  65. }
  66. return Promise.reject(data);
  67. }
  68. return data;
  69. };
  70. function addToast(){
  71. showLoadingToast({
  72. message: '加载中...',
  73. forbidClick: true,
  74. duration: 0,
  75. });
  76. loadingCount++
  77. console.log('loadingCount+',loadingCount)
  78. }
  79. function reduce(){
  80. loadingCount--
  81. if (loadingCount == 0) {
  82. closeToast()
  83. }
  84. console.log('loadingCount-',loadingCount)
  85. }
  86. export default request;