时间戳

首页 > 解决方案 > 使用 Axios/Mobx 的 React.js 应用程序中的无尽 Http 404 错误响应循环

javascript - 使用 Axios/Mobx 的 React.js 应用程序中的无尽 Http 404 错误响应循环

问题描述

我正在开发一个使用 Axios 进行 HTTP 处理和 MobX 进行状态管理的 React.js 应用程序。我收到了这个错误，我发送了一个测试无效的 HTTP 响应，应该会导致 404 错误。但我得到的是 404 错误循环不断重复，控制台的外观如下：

无尽的错误循环

这是产生此错误的方法。我创建了一个“调试模式”版本：

    // for testing
    @action loadActivityDos = async (id: string) => {
        let activity = this.getActivity(id);
        console.log("Step 1: get activity from local activityRegistry");
        if (activity) {
            this.activity = activity;
            console.log("Step 2-1: set local activity to scoped activity");
        } else {
            this.loadingInitial = true;
            try {
                activity = await agent.Activities.details(id);
                runInAction('getting activity', () => {
                    this.activity = activity;
                    this.loadingInitial = false;
                })
                console.log("Step 2-2: get activity from API in the try block");
            } catch(error) {
                runInAction('get activity error', () => {
                    this.loadingInitial = false;
                })
                console.log("Errored -> error block");
            }
        }

首先，该方法在未能从本地数组中获取“活动”后命中了 try 块。等待来自 API 的“活动”的第一行抛出 Http 404 错误，发送到控制台中“错误 - > 错误块”登录的 catch 块。

它应该在那里结束，但是在“Errored -> error block”日志之后，由于未知原因，它会打印“Step 1: get activity from local activityRegistry”，这意味着整个方法从头开始运行。然后它继续重复自己。

这是与 API 通信的 Axios 代码，但我找不到任何会导致这种行为的东西：

axios.defaults.baseURL = 'https://localhost:5001/api';

const responseBody = (response: AxiosResponse) => response.data;

const sleep = (ms: number) => (response: AxiosResponse) => 
    new Promise<AxiosResponse>(resolve => setTimeout(() => resolve(response), ms));

const requests = {
    get: (url: string) => axios.get(url).then(responseBody),
}

const Activities = {
    list: ():Promise<IActivity[]> => requests.get('/activities'),
    details: (id: string) => requests.get(`/activities/${id}`),
}

我不知道为什么会发生这种循环，如果有人能提供一些启示，我将不胜感激。我很乐意提供任何其他细节。

标签： javascriptreactjshttpaxiosmobx

解决方案

从哪里loadActivityDos调用？你有一个reaction叫它或者你可以使用它useEffect吗？

也许您有无限reaction循环，它会对您更改的某些标志做出反应

或者可能最后useEffect没有deps数组并且每次渲染都被调用。

推荐阅读