TS + Axios简单使用

• 在ts项目中给axios的config加属性,例如 loading
• 定义接口返回的数据类型

1 简单封装axios

/**
 * ~/src/utils/api.request.ts
 */
import axios from 'axios';
import { Toast } from 'vant';
const baseURL = import.meta.env.VITE_REQUEST_BASE_URL;

/**
 * 创建axios实例
 */
const axiosInstance = axios.create({
  baseURL,
  timeout: 15000,
});

/**
 * 请求拦截
 */
axiosInstance.interceptors.request.use(
  function (config) {
    // 打开 loading
    if (config.loading) {
      Toast.loading({
        message: 'loading...',
        forbidClick: true,
        duration: 0,
      });
    }

    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  },
);

/**
 * 响应拦截
 */
axiosInstance.interceptors.response.use(
  function (response) {
    // 关闭 loading
    if (response.config.loading) {
      Toast.clear();
    }

    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 关闭 loading
    if (error.config.loading) {
      Toast.clear();
    }

    // console.log('error', error);
    // console.log('error.request', error.request);
    // console.log('error.config', error.config);
    // console.log('error.response', error.response);
    // console.log('error.message', error.message);

    // 对响应错误做点什么
    switch (error.response?.status) {
      case 400:
        error.message = '请求错误(400)';
        break;
      case 401:
        error.message = '未授权(401)';
        break;
      case 403:
        error.message = '拒绝访问(403)';
        break;
      case 404:
        error.message = '请求出错(404)';
        break;
      case 408:
        error.message = '请求超时(408)';
        break;
      case 500:
        error.message = '服务器错误(500)';
        break;
      case 501:
        error.message = '服务未实现(501)';
        break;
      case 502:
        error.message = '网络错误(502)';
        break;
      case 503:
        error.message = '服务不可用(503)';
        break;
      case 504:
        error.message = '网络超时(504)';
        break;
      case 505:
        error.message = 'HTTP版本不受支持(505)';
        break;
      default:
        error.message = `连接出错(${error.response?.status})!`;
    }
    Toast.fail(error.message);

    return Promise.reject(error);
  },
);

export default axiosInstance;
export const request = axiosInstance.request;

2 axios config添加自定义属性

在根目录添加一个新的***.d.ts文件

/**
 * ~/src/***.d.ts
 */
import { AxiosRequestConfig } from 'axios';

declare module 'axios' {
  export interface AxiosRequestConfig {
    loading?: boolean;
    // [自定义属性声明]
  }
}

3 axios 声明接口响应数据类型

使用泛型声明响应数据的类型

import { request } from '@/utils/api.request';
import { TypeRequestApiResult } from '#types/***'

request

4 完整使用

/**
 * ~/src/apis/***.ts
 */
import { request } from '@/utils/api.request';
import {
  TypeRequestApiParams,
  TypeRequestApiResult,
} from '#types/***';

// 请求
export const RequestApi = (data: TypeRequestApiParams) => {
  return request({
    method: 'post',
    url: '***',
    data,
    loading: true,
  });
};