用ts简单封装axios（笔记）

1.为什么要创建axios的实例呢?

• 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
• 当给该实例设置一些默认配置时, 这些配置就被固定下来了.但是后续开发中, 某些配置可能会不太一样.比如某些请求需要使用特定的baseURL或者timeout或content-Type等.
• 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

2.封装代码可以自选是否传入拦截器(其实就是在use（）中传入两个钩子函数)

axios设置拦截器：拦截每次请求和响应，简单使用方法如下：

• paxios.interceptors.request.use(请求成功拦截, 请求失败拦截)
• paxios.interceptors.response.use(响应成功拦截, 响应失败拦截)

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

3.正式封装

3.1核心封装文件

import axios from 'axios';
//引入axios实例类型
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
//引入自己封装的接口，实现拦截器的合法传入
import {HYRequestInterceptors,HYRequestConfig} from './type'

class HYRequest {
  instance: AxiosInstance
  interceptors?: HYRequestInterceptors;

//这里的config: HYRequestConfig类型是由于AxiosRequestConfig中不能接收拦截器的参数
  constructor(config: HYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors
  
this.instance.interceptors.request.use(this.interceptors?.requestInterceptor,this.interceptors?.requestInterceptorCatch)
  }

//使用request测试是否成功
  request(config: AxiosRequestConfig) {
    this.instance.request(config).then((res) => {
      console.log(res);
    })
  }
}

export default HYRequest;

3.2自己定义的类型接口

import type {AxiosRequestConfig,AxiosResponse } from'axios'


export interface HYRequestInterceptors {
  requestInterceptor?: (config: AxiosRequestConfig)=>AxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (config:AxiosResponse)=>AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

export interface HYRequestConfig extends AxiosRequestConfig{
  interceptors?:HYRequestInterceptors
}

3.3环境变量的使用

let BASE_URL = "";
const TIME_OUT = 10000;

if (process.env.NODE_ENV === "development") {
  BASE_URL = "http://123.207.32.32:8000/";
} else if (process.env.NODE_ENV === "production") {
  BASE_URL = "http://123.207.32.32:8000/";
} else {
  BASE_URL = "http://123.207.32.32:8000/";
}

export { BASE_URL, TIME_OUT };

3.4生成实例，传入全局的配置(对外暴露的接口)

import HYRequest from "./request/request";
import { BASE_URL, TIME_OUT } from "./request/config";
const hyRequest = new HYRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestInterceptor: function(config) {
      console.log(config);

      return config;
    },
    requestInterceptorCatch: (error) => error,
  },
});

export default hyRequest;

3.5在其他文件中只需要引用hyRequest，调用其request函数即可。