老师这里似乎有个口误

Question

大约在视频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)

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

Answer 1

ustbhuangyi 2020-07-05 23:04:09

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 的类型，而你定义联合类型本身就没什么意义，也不能这么做。