React Native中fetch POST请求如何捕获账号密码错误等响应错误触发catch

核心原理 #

fetch API 本身的设计规则是仅当网络层异常（如断网、跨域拦截、DNS解析失败、请求无法到达服务器）时才会触发catch回调；只要服务器返回了有效响应，不管是HTTP 4xx/5xx状态码，还是接口返回的业务逻辑错误，都会进入then链，因此需要我们手动判断响应合法性，主动抛出错误才能让这类异常进入catch处理。

具体实现步骤 #

• 第一步：在第一个处理response的then回调中，先通过response.ok属性判断HTTP状态是否正常（200~299区间为正常），拦截HTTP层面的错误
• 第二步：拿到接口返回的JSON数据后，按照业务的错误结构判断是否为业务错误，你提供的错误返回带有error字段，匹配到该字段即可判定为业务异常
• 第三步：判定为异常时主动使用throw抛出错误，抛出的错误会直接穿透后续then逻辑，进入catch块

修改后的完整代码 #

fetch("https://websiteo.com/auth/realms/realmsid/protocol/openid-connect/token", {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded.toString(),
})
  .then(async response => {
    // 先转换响应为JSON，无论成功失败都要拿到返回内容
    const result = await response.json()
    // 同时拦截HTTP状态异常 + 业务异常
    if (!response.ok || result.error) {
      // 抛出自定义结构的错误，方便catch中直接读取信息
      throw {
        status: response.status,
        data: result
      }
    }
    return result
  })
  .then(result => {
    console.log(result)
    saveToken('secure_access_token', `${result.access_token}`)
    props.navigation.navigate('HomeApp')
  })
  .catch(error => {
    // 此处可统一处理网络错误、HTTP错误、业务错误三类异常
    const errMsg = error.data?.error_description || '请求失败，请检查网络后重试'
    alert(errMsg)
  })

注意点 #

• 如果你的接口存在非JSON格式的返回场景，可以加一层try catch包裹response.json()的逻辑，避免解析报错导致逻辑中断
• 自定义抛出的错误结构可以根据业务需求灵活调整，适配后续统一错误处理的规则即可

内容的提问来源于stack exchange，提问作者Kasper Niedrig