umi4 如何在响应拦截器中获取Response<T>这个泛型T

[weilun0510]

我想直接消费后端数据，所以在响应拦截器中直接返回了response.data.data，我想对 response.data.data 添加类型，不知道怎么处理

// 与后端约定的响应数据格式
interface ResponseStructure<T> {
  success: boolean;
  data: T;
  errorCode?: number;
  errorMessage?: string;
  showType?: ErrorShowType;
}

responseInterceptors: [
    [
      (response) => {
        console.log('response: ', response);
        // 拦截响应数据，进行个性化处理
        const data = response.data as ResponseStructure<any>;
        if (!data.success) {
          return businessErrorHandler(data);
        }
        return data.data;
      },
   ]
]

[fz6m]

这里只是响应拦截器，统一处理响应结构体的地方，和你代码中实际使用请求方法时的类型提示无关，因为你的每个请求肯定要封装为一个个方法，比如：

// src/services/api.ts

import { request } from 'umi'  // or `@umijs/max`

export interface IList {
  // ...
}

export const getList = async () => {
  const res = await request('/path')
  return res as IList[]
}

到时候你调用这个方法去请求的时候就有类型提示了，而和你在响应拦截器的地方写啥类型无关，这俩是不能通用的。

不推荐在响应拦截器里把 data 直接解出来，因为未来肯定大概率会遇到需要用到非 data 的时候，比如需要判断 success / errorCode 等，这个时候你就难办了，而是应该在每个请求方法里去解 data ，比如：

// src/services/interface.ts

export type IResponse<T = any> = {
  success: boolean;
  data: T;
  errorCode?: number;
  errorMessage?: string;
  showType?: ErrorShowType;
} | undefined;

// src/services/api.ts

import { request } from 'umi'  // or `@umijs/max`
import { IResponse } from './interface'

export interface IList {
  // ...
}

export const getList = async () => {
  const res = (await request('/path')) as IResponse<IList>
  return res?.data
}

[weilun0510]

还有个问题想请教下：我想直接在业务代码里写请求状态为正常的逻辑（不想重复写if (data.success) { do something... }），我该怎么做？
我目前的做法是在响应拦截器中判断if(!data.success){ message.error(data.errorMessage); return Promise.reject() } ，但是会提示类型错误。可能是我没看懂resopense的类型

[fz6m]

对响应的错误代码等的统一报错处理放在 响应拦截器 里就好。

但是如上文我的回复中所述，在响应拦截器里不应该剥离响应的数据结构（不应该把 data 剥离出来），因为会对后续的单接口特殊逻辑造成影响，比如虽然在响应拦截器里对 success 为 false 有报错逻辑，但是以后有的接口要校验、取用其他字段或者 success: false 不报错，则需要人为添加其他选项去走特殊逻辑。

对于类型报错，响应拦截器最后要把 response 传入的参数 return 返回回去，可点击类型到类型定义处查看具体需要什么类型。

[weilun0510]

了解了，非常感谢。我现在只在响应拦截器里做统一报错处理，并直接返回 response，如果!data.scuuess，我返回Promise.reject()，这样就可以在业务代码中取到所有字段，也不用写try/catch ，可以直接写 data.success 后的代码