config文件

  1. import http from 'http';
  2. import https from 'https';
  3. import qs from 'qs';
  4. import { AxiosResponse, AxiosRequestConfig } from 'axios';
  6. const axiosConfig: AxiosRequestConfig = {
  7.   baseURL: '/',
  8.   // 请求后的数据处理
  9.   transformResponse: [
  10.     function(data: AxiosResponse) {
  11.       return data;
  12.     },
  13.   ],
  14.   // 查询对象序列化函数
  15.   paramsSerializer: function(params: any) {
  16.     return qs.stringify(params);
  17.   },
  18.   // 请求超时时间
  19.   timeout: 3000,
  20.   // 跨域是否带token
  21.   withCredentials: true,
  22.   responseType: 'json',
  23.   // xsrf 设置
  24.   xsrfCookieName: 'XSRF-TOKEN',
  25.   xsrfHeaderName: 'X-XSRF-TOKEN',
  26.   validateStatus: function(status: number) {
  27.     return status >= 200 && status < 300;
  28.   },
  29. };
  30. export default axiosConfig;

返回值的TS声明文件

  1. declare namespace Ajax {
  2.   // axios 返回数据
  3.   export interface AxiosResponse {
  4.     data: AjaxResponse;
  5.   }
  7.   // 请求接口数据
  8.   export interface AjaxResponse {
  9.     code: number;
  10.     data: any;
  11.     message: string;
  12.     success: boolean;
  13.   }
  14. }

请求主体

  1. import axios, { AxiosRequestConfig, AxiosError } from 'axios';
  2. import config from './config';
  3. import Cookies from 'universal-cookie';
  4. export const cookies = new Cookies({});
  6. interface Item {
  7.   url: string;
  8.   cancel: () => void;
  9. }
  10. let pending: Array<Item> = [];
  11. const CancelToken = axios.CancelToken;
  12. const removePending = (config: AxiosRequestConfig) => {
  13.   for (const p in pending) {
  14.     if (pending.hasOwnProperty(p)) {
  15.       const list = pending[p];
  16.       if (list.url === config.url + '&request_type=' + config.method) {
  17.         list.cancel();
  18.         pending.splice(+p, 1);
  19.       }
  20.     }
  21.   }
  22. };
  23. const service = axios.create(config);
  24. // 添加请求拦截器
  25. service.interceptors.request.use(
  26.   config => {
  27.     removePending(config);
  28.     config.cancelToken = new CancelToken(c => {
  29.       pending.push({
  30.         url: config.url + '&request_type=' + config.method,
  31.         cancel: c,
  32.       });
  33.     });
  34.     return config;
  35.   },
  36.   error => {
  37.     return Promise.reject(error);
  38.   }
  39. );
  41. // 返回状态判断(添加响应拦截器)
  42. service.interceptors.response.use(
  43.   res => {
  44.     removePending(res.config);
  45.     return res;
  46.   },
  47.   error => {
  48.     return Promise.reject(error);
  49.   }
  50. );
  52. /**
  53. * axios请求错误统一处理函数
  54. */
  55. function errorHandler(error: AxiosError): Ajax.AjaxResponse {
  56.   if (error.response) {
  57.     return {
  58.       success: false,
  59.       message: error.response.data.message,
  60.       code: 50000,
  61.       data: null,
  62.     };
  63.   }
  64.   return {
  65.     success: false,
  66.     code: 40400,
  67.     data: null,
  68.     message: error.message,
  69.   };
  70. }
  72. /**
  73. * 封装了几个通用的请求函数
  74. */
  75. export default {
  76.   get: function(url: string, params: any) {
  77.     const accessToken = cookies.get('token');
  78.     if (!accessToken) {
  79.       throw new Error('登录已失效，请重新登录');
  80.     }
  81.     // params添加到url中
  82.     return service
  83.       .get(url, {
  84.         params,
  85.         headers: {
  86.           accessToken,
  87.         },
  88.       })
  89.       .then((res: Ajax.AxiosResponse) => {
  90.         return res.data;
  91.       })
  92.       .catch(errorHandler);
  93.   },
  94.   del: function(url: string, params: any) {
  95.     const accessToken = cookies.get('token');
  96.     if (!accessToken) {
  97.       throw new Error('登录已失效，请重新登录');
  98.     }
  99.     return service
  100.       .delete(url, {
  101.         params,
  102.         headers: {
  103.           accessToken,
  104.         },
  105.       })
  106.       .then((res: Ajax.AxiosResponse) => {
  107.         return res.data;
  108.       })
  109.       .catch(errorHandler);
  110.   },
  111.   // 无需token
  112.   fetch: function(url: string, data: any) {
  113.     return service
  114.       .post(url, data)
  115.       .then((res: Ajax.AxiosResponse) => {
  116.         return res.data;
  117.       })
  118.       .catch(errorHandler);
  119.   },
  120.   post: function(url: string, data: any, params: any) {
  121.     const accessToken = cookies.get('token');
  122.     if (!accessToken) {
  123.       throw new Error('登录已失效，请重新登录');
  124.     }
  125.     // data添加到请求体body中
  126.     return service
  127.       .post(url, data, {
  128.         params,
  129.         headers: {
  130.           accessToken,
  131.         },
  132.       })
  133.       .then((res: Ajax.AxiosResponse) => {
  134.         return res.data;
  135.       })
  136.       .catch(errorHandler);
  137.   },
  138.   put: function(url: string, data: any, params: any) {
  139.     const accessToken = cookies.get('token');
  140.     if (!accessToken) {
  141.       throw new Error('登录已失效，请重新登录');
  142.     }
  143.     return service
  144.       .put(url, data, {
  145.         params,
  146.         headers: {
  147.           accessToken,
  148.         },
  149.       })
  150.       .then((res: Ajax.AxiosResponse) => {
  151.         return res.data;
  152.       })
  153.       .catch(errorHandler);
  154.   },
  155. };