老师这里似乎有个口误

来源:8-3 -3 拦截器的设计与实现 - 链式调用实现

慕莱坞0998854

2020-07-04

大约在视频5:07左右。

	//...
	interface PromiseChain<T>{
		resolved:Resolved<T> | ((config:AxiosRequestConfig)=>AxiosPromise)
		rejected?:RejectedFn
	}

	//...
	const chain: PromiseChain<any>[] = [
      {
        resolved: dispatchRequest,
        rejected: undefined
      }
    ]

如上,在写chain的时候,当时还没定这里给它一个什么类型,老师说

“这里可能是AxiosRequest,也可能是AxiosPromise,所以这里写为any类型”

我猜想老师想说的应该是

“可能是AxiosRequest,也可能是AxiosResponse”

抛开这个口误不谈,我们在使用拦截器的时候,拦截的对象可能是AxiosRequestConfig类型,也可能是返回的结果AxiosResponse类型,所以我觉得这里写any类型是不是范围太大了。所以我就改成了联合类型的形式

    const chain: PromiseChain< AxiosRequestConfig | AxiosResponse >[] = [
      {
        resolved: dispatchRequest,
        rejected: undefined
      }
    ]

	this.interceptors.request.forEach(interceptor => {
	  //这里不会报错
      chain.unshift(interceptor)
    })

    this.interceptors.response.forEach(interceptor => {
     // 这里却报错了!!!
      chain.push(interceptor)
    })	

Argument of type 'Interceptor<AxiosResponse<any>>' is not assignable to parameter of type 'PromiseChain<AxiosRequestConfig | AxiosResponse<any>>'.
  Types of property 'resolved' are incompatible.
    Type 'ResolvedFn<AxiosResponse<any>>' is not assignable to type '((config: AxiosRequestConfig) => AxiosPromise<any>) | ResolvedFn<AxiosRequestConfig | AxiosResponse<any>>'.
	      Type 'ResolvedFn<AxiosResponse<any>>' is not assignable to type 'ResolvedFn<AxiosRequestConfig | AxiosResponse<any>>'.
        Types of parameters 'val' and 'val' are incompatible.
          Type 'AxiosRequestConfig | AxiosResponse<any>' is not assignable to type 'AxiosResponse<any>'.
            Type 'AxiosRequestConfig' is not assignable to type 'AxiosResponse<any>'.ts(2345)

希望老师解答下这个错误。

写回答

1回答

ustbhuangyi

2020-07-05

Argument of type 'Interceptor<AxiosResponse<any>>' is not assignable to parameter of type 'PromiseChain<AxiosRequestConfig | AxiosResponse<any>>'.
 Types of property 'resolved' are incompatible.
   Type 'ResolvedFn<AxiosResponse<any>>' is not assignable to type '((config: AxiosRequestConfig) => AxiosPromise<any>) | ResolvedFn<AxiosRequestConfig | AxiosResponse<any>>'.
     Type 'ResolvedFn<AxiosResponse<any>>' is not assignable to type 'ResolvedFn<AxiosRequestConfig | AxiosResponse<any>>'.
       Types of parameters 'val' and 'val' are incompatible.
         Type 'AxiosRequestConfig | AxiosResponse<any>' is not assignable to type 'AxiosResponse<any>'.
           Type 'AxiosRequestConfig' is not assignable to type 'AxiosResponse<any>'.ts(2345)

你把这个报错翻译一下就是原因了

interface PromiseChain<T> {
 resolved: ResolvedFn<T> | ((config: AxiosRequestConfig) => AxiosPromise)
 rejected?: RejectedFn
}

再看一下这个 PromiseChain 的定义,T 是给 ResovledFn 用的

export interface ResolvedFn<T> {
 (val: T): T | Promise<T>
}

说白了就是响应拦截器函数的参数是 T 类型,返回值的 Pomise 对应的也是 T 类型,所以 PromiseChain 类型是 any,就是给 T 参数传递 any,表示不限制 ResolvedFn 的类型,而你定义联合类型本身就没什么意义,也不能这么做。

0
0

下一代前端开发语言 TypeScript从零重构axios

课程从零开始重构功能完整的JS库,是学习造轮子的不二之选!

2629 学习 · 877 问题

查看课程