wangchenhao/vue-typescript-admin

Axios 响应拦截问题

zhaokuohaha opened this issue · 5 comments

给 axios 添加响应拦截, 将返回数据改为 response.data 会存在一个问题,
axios的type声明文件中将返回类型定义为AxiosResponse 类型, 如果拦截掉,
那么使用$http请求的数据返回实际为用户自定义类型, 但是因为type 声明的原因,
此时直接取用户数据会导致ts报错.

比如后台接口 '/api/user' 返回数据为
{
 //... other properties
  name: admin
}

那么请求方法
this.$http.get('/api/user').then((res) => {
  console.log(res.name)
})

ts会认为这是非法的, 报错如下:
[ts] Property 'name' does not exist on type 'AxiosResponse'.

是不是可以通过覆盖声明文件或者别的办法解决这个问题?

是的,因为返回的类型变了,ts检查会抛出错误,得重新声明下。把现在返回的类型加到声明文件中。

export interface AxiosPromise extends Promise<AxiosResponse> {
}

可以拓展 axios 的这个声明。

😂 我刚刚想问这个, 对ts的声明不是很懂, 谢谢~

export interface AxiosPromise extends Promise<AxiosResponse> {
}

可以拓展 axios 的这个声明。

这个要怎么写呀

在对象里面新增新属性就行