axios-ts

request类的封装

// request/index.ts 
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { XYRequestInterceptors, XYRequestConfig } from './type'
class HYRequest {
  instance: AxiosInstance
  interceptors?: XYRequestInterceptors
  constructor(config: XYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors
    //单独实例的拦截
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )
    //所有实例的拦截
    this.instance.interceptors.request.use(
      (config) => {
        console.log('所有实例请求成功的拦截')
        return config
      },
      (err) => {
        console.log('所有实例请求失败的拦截')
        return err
      }
    )
    this.instance.interceptors.response.use(
      (res) => {
        console.log('所有实例响应成功的拦截')
        return res.data
      },
      (err) => {
        console.log('所有实例响应失败的拦截')
        return err
      }
    )
  }
  request<T>(config: XYRequestConfig<T>): void {
      
    //对单个请求的拦截
    if (config.interceptors?.requestInterceptor) {
      config = config.interceptors.requestInterceptor(config)
    }
      
    return new Promise<T>((resolve,reject)=>{
        this.instance.request<any,T>(config).then((res) => {  // res 是AxiosResponse类型，需要转为T类型
          if (config.interceptors?.responseInterceptor) {
            res = config.interceptors.responseInterceptor(res)
          }
          resolve(res)
        })
    })
  }
}
export default HYRequest

import axios from "axios";
import type { AxiosInstance } from "axios";
import type { HYRequestConfig } from "./type";

class HYRequest {
	instance: AxiosInstance;

	constructor(config: HYRequestConfig) {
		this.instance = axios.create(config);
		// 全局接口实例
		this.instance.interceptors.request.use(
			(config) => {
				console.log("全局请求成功拦截");
				config.headers["token"] = "xxxx";
				return config;
			},
			(error) => {
				console.log("全局请求失败拦截");
				return error;
			}
		);

		this.instance.interceptors.request.use(
			(res) => {
				console.log("响应成功拦截");
				return res.data;
			},
			(error) => {
				console.log("响应失败拦截");
				return error;
			}
		);

		// 单个接口实例
		this.instance.interceptors.request.use(
			config.interceptors?.requestInterceptor,
			config.interceptors?.requestInterceptorCatch
		);
		this.instance.interceptors.response.use(
			config.interceptors?.responseInterceptor,
			config.interceptors?.responseInterceptorCatch
		);
	}

	request<T = any>(config: HYRequestConfig<T>) {
		// 单次请求成功拦截
		if (config.interceptors?.requestInterceptor) {
			config = config.interceptors.requestInterceptor(config as any);
		}

		return new Promise((resolve, reject) => {
			this.instance
				.request<any, T>(config)
				.then((res) => {
					resolve(res);
				})
				.catch((err) => {
					reject(err);
				});
		});
	}
	get<T = any>(config: HYRequestConfig<T>) {
		return this.request<T>({
			...config,
			method: "get"
		});
	}

	post<T = any>(config: HYRequestConfig<T>) {
		return this.request<T>({
			...config,
			method: "post"
		});
	}

	delete<T = any>(config: HYRequestConfig<T>) {
		return this.request<T>({
			...config,
			method: "delete"
		});
	}

	put<T = any>(config: HYRequestConfig<T>) {
		return this.request<T>({
			...config,
			method: "put"
		});
	}
}

export default HYRequest;

类型配置

import type {
	AxiosRequestConfig,
	AxiosResponse,
	InternalAxiosRequestConfig
} from "axios";
export interface HYRequestInterceptors<T = AxiosResponse> {
	requestInterceptor?: (
		config: InternalAxiosRequestConfig
	) => InternalAxiosRequestConfig;
	requestInterceptorCatch?: (error: any) => any;
	responseInterceptor?: (config: T) => T;
	responseInterceptorCatch?: (error: any) => any;
}
export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
	interceptors?: HYRequestInterceptors<T>;
}

环境配置

// request/config.ts
let BASE_URL:string = ''
let TIME_OUT:number = 5000
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'https://api.development'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'https://api.production'
} else if (process.env.NODE_ENV === 'releave') {
  BASE_URL = 'https://api.releave'
}
export { BASE_URL,TIME_OUT }

实例化

import HYRequest from './request'
import { BASE_URL,TIME_OUT } from './request/config'
const HYRequest = new HYRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestInterceptor: (config) => {
      console.log('请求拦截成功')
      return config
    },
    responseInterceptorCatch: (err) => {
      console.log('请求拦截失败')
      return err
    },
    responseInterceptor: (res) => {
      console.log('响应拦截成功')
      return res
    },
    requestInterceptorCatch: (err) => {
      console.log('响应拦截失败')
      return err
    }
  }
})
export default HYRequest

单独请求

import HYRequest from './service'
interface CityType {
    data:any
    list:array
    ...
}
HYRequest.request<CityType>({
  url: '/city/all',
  interceptors: {
    requestInterceptor: (config) => {
      console.log('/city/all请求的成功拦截')
      return config
    },
    responseInterceptor: (res) => {
      console.log('/city/all响应的失败拦截')
      return res
    }
  }
}).then(res=>{
    console.log(res)
})