美文网首页
用ts简单封装axios(笔记)

用ts简单封装axios(笔记)

作者: LcoderQ | 来源:发表于2021-09-02 16:30 被阅读0次

    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函数即可。

    相关文章

      网友评论

          本文标题:用ts简单封装axios(笔记)

          本文链接:https://www.haomeiwen.com/subject/ndskwltx.html