axios的返回值类型问题？

Question

一般的axios的返回值类型

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

但是我在拦截器中做了处理，只返回接口的data

axios.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

然后实际使用的时候，提示我类型不对

promise.then((res: ResponseData)=>{})

提示我

类型“(res: ResponseData) => void”的参数不能赋给类型“(value: AxiosResponse<any, any>) => void | PromiseLike<void>”的参数。
  参数“res”和“value” 的类型不兼容

应该怎么解决？

Answer 1

换成axios.request<any, ResponseData>() 方式看看，可以通过传入泛型，修改返回类型AxiosResponse

从axios的ts类型定义文件可以看出来，

export interface AxiosInstance {
  (config: AxiosRequestConfig): AxiosPromise;
  (url: string, config?: AxiosRequestConfig): AxiosPromise;
  defaults: AxiosRequestConfig;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse>;
  };
  getUri(config?: AxiosRequestConfig): string;
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;

如果直接用axios(config).then()的方式，axios()执行后返回AxiosPromise
而AxiosPromise的定义看

export interface AxiosPromise<T = any> extends Promise<AxiosResponse<T>> {
}

并没有提供泛型，来修改返回值类型AxiosResponse，所以这种方式走不通，

如果用axios.request(config)方式，则可以利用

request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;

axios.request<any, ResponseData>()泛型，修改返回值类型AxiosResponse<T>

Answer 2

封装一个fetch函数，把返回值类型当成泛型传入

async function fetch<T> (): T {
    const data = await axios()
    return data
}

这样你返回的类型就是你传入的泛型了

Answer 3

axios.get 的类型定义

get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;

在使用 axios.get 时，把 ResponseData 作为泛型传进去就行啦

axios
    .get<any, ResponseData>(url)
    .then(res => {
        // res 的类型是 ResponseData
        ...    
    })
    .catch(...)