React使用Redux实现集中错误处理的正确方案咨询

核心实现方案 #

• 方案1：组件层通过unwrap()方法捕获单次请求错误

createAsyncThunk触发后返回的Promise默认会静默处理rejected状态，调用内置的unwrap()方法可以将请求错误主动抛出，供组件层单独捕获做定制化处理

// 组件内调用示例
const fetchData = async () => {
  try {
    // dispatch异步action后调用unwrap
    await dispatch(fetchAddress(请求参数)).unwrap()
    // 接口请求成功的业务逻辑
  } catch (err) {
    // 此处可编写当前请求独有的错误处理逻辑
    // 全局错误处理逻辑仍会正常执行，若不需要可结合方案2配置
    console.log('当前请求专属错误处理：', err)
  }
}

• 方案2：自定义参数控制是否跳过全局错误逻辑

针对不需要走全局错误处理（如不存入全局错误Slice、不触发通用错误提示）的请求，可以新增自定义标识，在全局错误拦截层做判断过滤

// 改造createAsyncThunk逻辑
export const fetchAddress = createAsyncThunk('address/fetch', async (data = {}, thunkAPI) => {
  try {
    return await Service.fetch(getAPIConfig('address'))
  } catch (error) {
    // 判断请求参数中是否携带跳过全局处理的标识
    if (data.skipGlobalError) {
      // 通过rejectWithValue传递标识给全局拦截层
      return thunkAPI.rejectWithValue(error, { skipGlobalError: true })
    }
    throw error
  }
})

// 全局错误处理逻辑（如中间件、extraReducers中）示例
if (action.meta?.arg?.skipGlobalError || action.payload?.skipGlobalError) {
  // 命中标识时不执行全局错误逻辑
  return
}
// 未命中时执行存入错误Slice、弹通用提示等全局逻辑

• 方案3：扩展自定义错误类适配多场景

你当前Service层已经封装了ApplicationError自定义错误类，可以扩展内置属性，不管是全局处理还是单次请求处理，都可以通过属性值做差异化逻辑

// ApplicationError 扩展示例
class ApplicationError extends Error {
  constructor({ error, bizCode, needAuth, skipGlobalTip }) {
    super(error.message)
    // 业务错误码
    this.bizCode = bizCode
    // 是否需要跳转登录
    this.needAuth = needAuth
    // 是否跳过全局错误提示
    this.skipGlobalTip = skipGlobalTip
    // 原始错误对象
    this.raw = error
  }
}

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