简单的axios封装

1.引入axios
2.创建一个实例
3.添加拦截器(请求拦截器,响应拦截器)
4.配置必传的参数
6.向外暴露
 

// 1.引入axios
import axios, { AxiosInstance } from "axios";

// 创建一个实例
class AxiosUtil {
  private http: AxiosInstance;
  //constructor构造函数  如果class被new了一个新的实例,会自动调用构造函数来做准备函数
  constructor() {
    this.http = axios.create({
      baseURL: "http://127.0.0.1:5000",
      timeout: 3000, //请求超时时间,请求时间超过则提醒请求超时
    });

    //   拦截器在实例一创建的时候就要调用
    this.addInterceptors();
  }

  // axios拦截器
  private addInterceptors() {
    // 请求拦截
    this.http.interceptors.request.use(
      (config) => {
        // 可以做一些操作,例如拦截添加token
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );

    //   响应拦截器
    this.http.interceptors.response.use(
      (res) => {
        // 处理请求回来的东西
        return Promise.resolve(res);
      },
      (err) => {
        return Promise.reject(err);
      }
    );
  }

  //  配置必传参数的方法
  private request(method: string, url: string, data?: any) {
    return this.http({
      method,
      url,
      data: method == "post" ? data : "",
      params: method == "get" ? data : "",
    });
  }

  // 进一步配置几种请求方式
  public post(url: string, data?: any) {
    return this.request("post", url, data);
  }

  public get(url: string, data?: any) {
    return this.request("get", url, data);
  }
}

// 向外暴露  如果只想部分暴露,可以使用public和private
//  如果class被new了一个新的实例,会自动调用构造函数来做准备函数
const $http = new AxiosUtil();
export default $http;