代码之家 › 专栏 › 技术社区 › Jimmy

使用async await和redux处理错误

async-await redux javascript

Jimmy · 技术社区 · 6 年前

我想创建一个单独的类来处理我的redux操作的所有api请求、post等,就像有时所做的那样,这样我的redux操作代码就更少了,所做的工作也更少了。但是,当错误发生时,我需要确保我的操作捕捉到这些错误,并将它们正确地发送到相应的reducer。我的困惑是,我的api函数本身也在捕捉错误,我想知道,如果一个错误首先发生,它会首先在我的api函数中被捕捉,因此我不会在我的action函数中捕捉错误,因此从来没有调度过所说的错误?如何避免此问题?我能不能不捕捉api函数中的错误,而只是将它们转移到我的操作中?或者我需要派遣 requestDataFailure 我的api函数?谢谢。

export const fetchData = () => async (dispatch) => {
  dispatch(requestData());
  try {
    const json = await ApiClass.getData();
    dispatch(receiveData(json.data));
  } catch (error) {
    dispatch(requestDataFailure(error));
  }
};

Api类:

import HttpService from './httpServce';

export default class ApiClass {
  static async getData() {
    try {
      const response = await HttpService.get('api/get-data');
      return response.json;
    } catch (error) {
      throw Error(error.message);
    }
  }
}

1 回复 | 直到 6 年前

Blue 6 年前

它们最终都会变成你的主要方法。

在你的 ApiClass fetchData 函数,并将被该块捕获。

有几种方法可以做到这一点:

把try/catch放在ApiClass中,用它来显示更“友好”的错误消息。把错误从你的 HttpService.get 可能从服务器读取json的输出(如果不是500个错误),并根据结果抛出不同的错误。例如:

class ProductNotFound extends ApiError {
  constructor(name) {
    super(`This product: '${name}' was not found.`);
  }
}

export default class ApiClass {
  static async getProducts() {
    try {
      const response = await HttpService.get('api/get-products');
      return response.json;
    } catch (error) {
      if (error.code === 404) {
        throw new ProductNotFound();
      }
      // Check if error.response contains valid json, and if so, output a server side message?

      // Unknown error, just throw
      throw ApiUnknownError(error.message);
    }
  }
}

现在你可以简单地使用 requestDataFailure 并传递error.message,并将其显示给最终用户。

或者,你也可以 return response.json; 没有用try/catch块包装。什么时候? 拒绝,它将抛出一个错误,您可以简单地使用 error.message 去吃生的 HttpService.get获取

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

2 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

2 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

2 年前

geyser · React Redux toolkit-输入字段的状态管理

2 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

2 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

2 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

2 年前