如何提取Apisauce重复API调用代码中的公共逻辑？

我用Apisauce重写了所有API调用，它表现出色，但代码存在大量重复，示例如下：

const response: ApiResponse<{ result: ReponseType }> = await api.post('endpoint1', reqBody);
if (!response.ok || !response.data) {
  return getGeneralApiProblem(response);
}
return { kind: 'ok', userInfo: response.data.result };

const response: ApiResponse<{ result: ReponseType }> = await api.post('endpoint2', reqBody);
if (!response.ok || !response.data) {
  return getGeneralApiProblem(response);
}
return { kind: 'ok', userInfo: response.data.result };

const response: ApiResponse<{ result: ReponseType }> = await api.post('endpoint3', reqBody);
if (!response.ok || !response.data) {
  return getGeneralApiProblem(response);
}
return { kind: 'ok', userInfo: response.data.result };

希望提取重复的判断逻辑，甚至连同返回逻辑一起封装，以下是可行的解决思路：

思路1：封装通用响应处理函数 #

编写一个通用函数，接收API请求Promise作为参数，内部统一处理响应判断和结果返回：

// 定义通用处理函数
async function handleApiResponse<T>(
  request: Promise<ApiResponse<{ result: T }>>
): Promise<{ kind: 'ok'; userInfo: T } | ReturnType<typeof getGeneralApiProblem>> {
  const response = await request;
  // 统一判断逻辑
  if (!response.ok || !response.data) {
    return getGeneralApiProblem(response);
  }
  // 统一返回逻辑
  return { kind: 'ok', userInfo: response.data.result };
}

使用方式 #

调用API时直接传入请求Promise即可：

// 调用endpoint1
const result = await handleApiResponse(api.post('endpoint1', reqBody));
// 调用endpoint2
const result = await handleApiResponse(api.post('endpoint2', reqBody));

思路2：封装Apisauce请求方法 #

如果所有API调用的返回结构一致，可以直接封装Apisauce的post（或其他请求方法），进一步简化调用：

// 封装后的API客户端
const wrappedApi = {
  async post<T>(endpoint: string, body: unknown): Promise<{ kind: 'ok'; userInfo: T } | ReturnType<typeof getGeneralApiProblem>> {
    const response = await api.post<{ result: T }>(endpoint, body);
    if (!response.ok || !response.data) {
      return getGeneralApiProblem(response);
    }
    return { kind: 'ok', userInfo: response.data.result };
  }
};

使用方式 #

直接调用封装后的方法，无需重复处理响应：

const result = await wrappedApi.post<ReponseType>('endpoint1', reqBody);

扩展：支持自定义结果转换 #

如果后续有接口返回结构不同，可以在通用函数中加入转换函数参数，灵活适配不同场景：

async function handleApiResponse<T, R>(
  request: Promise<ApiResponse<{ result: T }>>,
  transformResult: (result: T) => R
): Promise<{ kind: 'ok'; data: R } | ReturnType<typeof getGeneralApiProblem>> {
  const response = await request;
  if (!response.ok || !response.data) {
    return getGeneralApiProblem(response);
  }
  return { kind: 'ok', data: transformResult(response.data.result) };
}

// 使用示例：保留原有userInfo结构
const result = await handleApiResponse(api.post('endpoint1', reqBody), (result) => ({ userInfo: result }));
// 使用示例：直接返回原始result
const result = await handleApiResponse(api.post('endpoint1', reqBody), (result) => result);

内容的提问来源于stack exchange，提问作者Andon Mitev