扩展 axios AxiosResponse 接口返回值字段

由于项目接口的返回值风格由开始的 restful 转变成 code、data、message，前端需要对应的修改返回值字段应对修改。

我们首先看到 axios 的返回值类型是 AxiosResponse， 打开后是这样

export interface AxiosResponse<T = any>  {
 data: T;
 status: number;
 statusText: string;
 headers: any;
 config: AxiosRequestConfig;
 request?: any;
}

之前我们从接口拿数据就只是获取这个 data，类似这种

// 接口定义
export const getXXX = () => {
 return ajax.get<Array<IXXX>>('/xxx/xxx')
}
// 接口调用
const { data } = await getXXX()

基于 restful 风格的 code 码完全依赖 httpCode，现在改成 code、data、message 后除了判断 httpCode 还需要判断业务状态码（比如 httpCode 是 200，业务状态码有更细的划分），因此我需要扩展 axios 这个返回值类型的字段。


为了最小的侵入之前的代码逻辑，此处采用的是新建一个 d.ts 文件，新建一个扩展接口，然后用 AxiosResponse 来继承扩展接口，代码逻辑如下

// 新建 axios.d.ts
import axios from 'axios'

declare module 'axios' {
 interface IAxios<D = null> {
   code: string
   message: string
   extra: D
 }
 export interface AxiosResponse<T = any> extends IAxios<D> {}
}

这里我扩展了三个所需要的字段，这里根据自己的需求进行扩展即可, 如此一来我不需要改动原有接口的代码逻辑，只是改变引用接口的地方

const { data, code } = await getXXX()

如此一来我们就可以愉快的用上 code、data、message 啦，并且不需要修改原有的接口定义，实现最小侵入性的目的。