使用capacitor-community/http时try catch无法捕获请求错误该如何处理？

问题原因 #

@capacitor-community/http 的默认响应处理逻辑和Axios不同：只有网络层级的错误（无网络、跨域、连接超时等）才会触发Promise reject进入catch块，4xx、5xx这类服务端返回的业务错误状态码会被判定为正常请求返回，不会主动抛出异常，这就是你当前try catch无法捕获业务错误的核心原因。

解决方案 #

方案1：单个接口封装手动抛错

你可以直接修改现有的login请求封装，手动判断响应状态码，非2xx范围的响应主动抛出错误，和你上层现有catch逻辑兼容，不需要修改业务层代码：

const login = async (formData: AuthLoginFormData): Promise<User> => {
  const res: HttpResponse = await Http.post({
    url: `${BASE_URL}public/auth/login`,
    headers: {
      'Content-Type': 'application/json',
    },
    data: formData,
    webFetchExtra: {
      credentials: 'include',
    },
  });

  // 新增状态码判断逻辑
  if (res.status < 200 || res.status >= 300) {
    const error = new Error('请求异常')
    // 对齐Axios错误结构，上层catch可直接读取err.response
    ;(error as any).response = res
    throw error
  }

  return res.data;
};

方案2：全局配置开启自动抛错

如果希望所有请求都和Axios行为保持一致，非2xx响应自动抛错，可以在项目初始化时全局配置shouldThrowOnError参数：

import { Http } from '@capacitor-community/http';

// 全局配置，所有请求默认自动抛错
Http.setRequestConfig({
  shouldThrowOnError: true
})

配置生效后不需要修改现有请求封装代码，上层try catch即可直接捕获4xx、5xx类的错误。如果有个别接口不需要自动抛错，也可以在单个请求参数中添加shouldThrowOnError: false覆盖全局配置。

内容的提问来源于stack exchange，提问作者Gilmar Cintra