React Native自定义Hook中使用axios处理失败Promise构建自定义状态对象

核心思路 #

不要使用Promise.all，它只要有一个请求失败就会直接触发catch，丢失所有成功请求的结果。改用Promise.allSettled，它会等待所有请求执行完成（无论成功/失败），返回每个请求的独立执行结果。
针对你需要管理15个接口的场景，我们通过统一配置映射的方式实现可扩展的逻辑，避免为每个接口硬编码重复代码。

完整实现代码 #

1. 改造请求逻辑 #

// 1. 统一配置所有请求，后续新增接口仅需在此添加项
const requestConfigs = [
  { key: 'api1', url: '/404api1' },
  { key: 'api2', url: '/api2' },
  // 剩余13个接口直接在此补充配置即可
]

// 2. 批量生成请求Promise
const requestPromises = requestConfigs.map(config => MyAxios.get<DataResponse>(config.url))

// 3. 等待所有请求完成，无论成功失败
const results = await Promise.allSettled(requestPromises)

// 4. 遍历结果生成新状态
const updatedState = {} as ResponseState
results.forEach((result, idx) => {
  const currKey = requestConfigs[idx].key
  if (result.status === 'fulfilled') {
    // 请求成功，写入数据
    updatedState[currKey] = {
      error: false,
      data: result.value.data
    }
  } else {
    // 请求失败，提取错误信息
    const err = result.reason
    const errorMsg = err.response
      ? `错误码${err.response.status}: ${err.response.data?.message || err.message}`
      : `网络异常: ${err.message}`
    updatedState[currKey] = {
      error: true,
      errorMsg
    }
  }
})

// 5. 合并更新状态，保留原有未修改的字段
setMyData(prev => ({ ...prev, ...updatedState }))

注意事项 #

• 你原有代码中使用的datos字段和ResponseState中定义的data字段不匹配，需修正该笔误避免类型错误。
• 如果你需要支持POST等其他请求方法、自定义请求参数，可直接在requestConfigs中新增对应字段，生成请求Promise时按需读取即可，无需修改核心逻辑。
• 如果你的Axios实例已经配置了全局错误拦截器，可提前格式化错误信息，此处直接读取即可，无需重复做错误解析。

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