在ts时使用axios请求类型定义增加属性

发布时间 2023-10-10 18:14:22作者: 月下云生

1.需求

  在后台请求中有一些请求数据量比较大无法一下返回,需要增加loading动画,为了方便控制想在请求的时候增加一个参数isLoading,默认关闭,传真值时开启动画。这便需要拓展axios中增加个性化参数配置。但是如何进行类型的定义呢?

2.操作

 如上,在做左边增加了isLoading参数,代码分析后,我们知道要在AxiosResponse中增加属性

 好,增加属性及其类型定义,解决。

3.优化

一阵子后发现新问题,该类型定义文件是在依赖node_modules文件中,也就是每次重新拉代码运行都得找到这个文件去加这个东西,有没有新的方式可以加一次就可以呢?

在全局类型定义中重新定义 AxiosRequestConfig 即可

export { }
declare module 'axios' {
    export interface AxiosRequestConfig {
      /**
       * @description 设置为true,则会在请求过程中显示isLoading动画,直到请求结束才消失
       */
      isLoading?: boolean;
    }
  }

  由于ts自带声明合并,因此我们使用的时候,AxiosRequestConfig 已经是axios的类型定义和重新类型定义的合二为一了。去掉原先的依赖文件的类型定义