老师你好,请问下图这里为什么要写两遍返回值类型

来源:5-8 业务组件-SearchView组件开发-02

celix

2023-01-29

老师你好,请问下图这里为什么要写两遍返回值类型?

图片描述

写回答

2回答

one_pieces

2023-01-29

首先第一个类型变量 T 是接口返回值的类型,第二个类型变量 R 是方法返回的 promise 里的数据的类型,可以通过 axios 的类型文件看出来。

//img.mukewang.com/szimg/63d6915409e289fa26121430.jpg

可以看到 R 其实默认是 T 包了一层 AxiosResponse,所以正常来说,我们接口返回的数据,应该是在 data 这个字段,这时我们只要声明 T 就可以了,比如 axios.get<ISearchResultList>,不需要第二个参数。

 //img.mukewang.com/szimg/63d691cc0935927a19721060.jpg

但我们为了代码简洁,使用拦截器统一处理接口数据,导致 get 返回的不是 Promise<AxiosResponse<T>>,而是 Promise<T>,所以我们不能使用 R 的默认值 AxiosResponse<T>,需要传入第二个类型变量,变成  axios.get<ISearchResultList, ISearchResultList>

//img.mukewang.com/szimg/63d693e50951db1521001078.jpg

1
2
秋得法
让我们来深入探讨一下为什么拦截器中的处理会影响到 Promise 的返回类型。 在 Axios 中,拦截器的作用是在请求或响应被发送或接收之前对它们进行拦截和处理。当你在拦截器中处理响应时,你可能会改变响应的结构或内容。这种处理可以包括解析响应、添加额外的信息、处理错误等。然而,在拦截器中进行的任何修改都会影响到最终返回给 Promise 的值。 默认情况下,Axios 返回的 Promise 是一个 AxiosResponse 对象,其中包含了 HTTP 请求的所有信息,如状态码、响应头、响应体等。如果在拦截器中对响应进行了处理,并返回了处理后的数据,那么就意味着原始的 AxiosResponse 对象会被替换为处理后的数据。 当 Promise 返回的不再是 AxiosResponse 对象,而是处理后的数据时,就会导致 Promise 的类型发生改变。原始的 Promise 类型 `Promise>` 将会丢失,而变成了一个普通的 `Promise` 类型,其中 T 表示处理后的数据类型。 这就是为什么在拦截器中对响应进行处理会影响到 Promise 的返回类型的原因。因此,在处理响应时,你需要确保返回的是符合你预期的数据类型,并根据需要在 Promise 中明确指定返回类型,以确保代码的正确性。
2024-03-20
共2条回复

weibo_被看穿了吗z_0

2023-03-14

//img.mukewang.com/szimg/640f48fe0960c63b17920817.jpg那所以说不需要第二个参数也可以?

0
1
one_pieces
不可以,理由上面说了哈
2023-03-14
共1条回复

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目

392 学习 · 251 问题

查看课程