时间戳

首页 > 解决方案 > 调用后端 API 时处理 javascript/react 中的错误

javascript - 调用后端 API 时处理 javascript/react 中的错误

问题描述

我正在构建一个 react-native 应用程序，并且我开始实现一个更强大和更复杂的错误处理系统，专门用于在发出 http 请求时处理服务器错误。这是我当前如何在我的应用程序中发出 http 请求的基本示例。

我有一个“client.js”文件，它本质上只是 axios 的一个包装器。我有一个看起来像这样的“get”方法：

const get = async (endpoint, config = {}) => {
  try {
    const result = await axios.get(domain + endpoint, config);
    return result;
  } catch (error) {
    throw new Error(error.message);
  }
};

然后，我为需要访问的每个 api 端点都有一个文件。例如，我有一个“posts.js”文件，在该文件中我有一个“getPosts”方法：

const getPosts = async (userID, page, pageSize) => {
  try {
    const response = await client.get(
      `${endpoint}?userID=${userID}&page=${page}&pageSize=${pageSize}`
    );
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
};

最后，在调用 getPosts 的组件中，我有一个看起来像这样的函数：

const loadPosts = async () => {
  try {
    const response = await getPosts();
    // do something with the response from the server
  } catch (error) {
    // display an error message to the client
  }
}

显然，这是一个请求可能看起来的非常简单的示例，但这是我在整个应用程序中使用的基本结构。我遇到的问题是，必须将几乎所有的函数都包装在一个 try/catch 块中，然后基本上引发一个错误对象，直到我到达实际处理错误的函数，这似乎非常重复和混乱. 是否有某种用于错误处理的“设计方法”来简化和集中这个过程？在创建节点服务器时可能类似于快速中间件？或者这是处理 javascript 错误的标准方法？

感谢任何可以提供帮助的人！

标签： javascripterror-handling

解决方案

由于您在这里使用 axios 作为 http 库，因此您可以查看 axios拦截器以挂钩响应并在将响应传递给消费者之前对其进行处理。这将帮助您响应从曾经的中心位置引发的错误。

axios.interceptors.response.use((response) => {
   return response;
}, function(error) {
   // do what you want to do with the error.
   return Promise.reject(error)
});

或者使用 ES5 语法

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Not 200 Ok
    // Do something with response error
    return Promise.reject(error);
});

推荐阅读