• 在ts項目中給axios的config加屬性,例如 loading
• 定義接口返回的數(shù)據(jù)類型

1 簡單封裝axios

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

/**
 * 創(chuàng)建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);
  },
);

/**
 * 響應(yīng)攔截
 */
axiosInstance.interceptors.response.use(
  function (response) {
    // 關(guān)閉 loading
    if (response.config.loading) {
      Toast.clear();
    }

    // 對響應(yīng)數(shù)據(jù)做點什么
    return response.data;
  },
  function (error) {
    // 關(guān)閉 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);

    // 對響應(yīng)錯誤做點什么
    switch (error.response?.status) {
      case 400:
        error.message = '請求錯誤(400)';
        break;
      case 401:
        error.message = '未授權(quán)(401)';
        break;
      case 403:
        error.message = '拒絕訪問(403)';
        break;
      case 404:
        error.message = '請求出錯(404)';
        break;
      case 408:
        error.message = '請求超時(408)';
        break;
      case 500:
        error.message = '服務(wù)器錯誤(500)';
        break;
      case 501:
        error.message = '服務(wù)未實現(xiàn)(501)';
        break;
      case 502:
        error.message = '網(wǎng)絡(luò)錯誤(502)';
        break;
      case 503:
        error.message = '服務(wù)不可用(503)';
        break;
      case 504:
        error.message = '網(wǎng)絡(luò)超時(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 聲明接口響應(yīng)數(shù)據(jù)類型

使用泛型聲明響應(yīng)數(shù)據(jù)的類型

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

request<unknown, TypeRequestApiResult>

4 完整使用

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

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