在 reactjs 中使用 axios 请求处理错误

Question

我有一个用 React 构建的 SPA 应用程序，其中有许多对 API 的 axios 调用。当错误状态 returns 401 时，我可以在 axios 中设置重定向到登录页面，但是由于大量调用分布在很多组件中，是否有更好的方法来处理这个问题而无需重复：

if (error.status === 401) {
    //redirect to login page
}

在每个请求中

Answer 1

避免在所有组件中编写 api 调用，创建一个单独的文件 api.js 或一些 abc.js，并编写一个通用的调用方法，并从具有适当参数的不同组件。在那种情况下，您需要在每个文件中处理所有这些类型的情况，只需将逻辑仅放在 api.js 文件中的一个位置即可。

api.js:

export function _callAPI(url, method, data, target){
     /*
         url: separate url for different component
         method: Get or Post or Put etc
         data: if required to pass
         target: callback method
     */
}

然后在不同的组件中导入：

import * as Api from 'path to api.js file';

通过以下方式调用：

Api._callAPI(url, method, data, (data) => {
    console.log(data);
})

在 reactjs 中使用 axios 请求处理错误

Error handling with axios requests in reactjs

javascript

ajax

reactjs

axios