初学者 React/Javascript：回调地狱答案

【问题标题】：beginner React/Javascript: callback hell初学者 React/Javascript：回调地狱
【发布时间】：2018-07-27 19:48:44
【问题描述】：

我正在尝试获取一些数据，然后获取一些其他数据。问题是，混合中有一个超时循环，这使得一切都变得如此复杂。而且它不起作用。

按顺序，我想做什么：

循环通过listOfGroups 并获取一个或多个获取请求到我的后端
完成后，再获取一次获取请求

所以，这是我的代码：

var i = 0;
var arrayOfPostURL = [];
isFinished = false;
while (isFinished == false)
    if(i == listOfGroups.length) {
        return fetch("/update_db_fcb_groups/" + theID + "/" + arrayOfPostURL).then((response) => {
                    response.json().then((data) => {
                        this.setState({onFcbGroups: arrayOfPostURL})
                        isFinished = true;
                    });
                });
    }
    if(i<listOfGroups.length){
        setTimeout(function(){
                fetch("/post_to_fcb_group/" + listOfGroups[i] + "/" + theID).then((response) => {
                    // console.log(response);
                    response.json().then((data) => {
                        arrayOfPostURL.push("+" + data.url)
                        i++;
                    });
                });
                // console.log(arr[i])
        },5000)
    }
}

这段代码甚至冻结了浏览器（谷歌浏览器）！

有什么想法吗？

【问题讨论】：

while (isFinished == false) 是的，这会冻结你的浏览器。
好的，我该如何改变它才能让它工作？
我不是。这段代码在一个 React 组件中
How do I return the response from an asynchronous call?的可能重复
您应该通读建议的副本How do I return the response from an asynchronous call?（答案写得很好），以便您对如何使用异步调用进行编程有一个基本的了解。一旦您了解需要对上述代码进行的更改就变得不言而喻了。

标签： javascript reactjs

【解决方案1】：

看起来您正在使用while 循环，而您可以使用for。

var arrayOfPostURL = [];

for (let group of listOfGroups) {
    setTimeout(function() {
        fetch("/post_to_fcb_group/" + group + "/" + theID).then((response) => {
            response.json().then((data) => {
                arrayOfPostURL.push("+" + data.url)
            });
        });
    }, 5000)
}

fetch("/update_db_fcb_groups/" + theID + "/" + arrayOfPostURL).then((response) => {
    response.json().then((data) => {
        this.setState({onFcbGroups: arrayOfPostURL}) 
    }); 
});

像这样分解您的代码会发现其他几个问题。

您的setTimeouts 将在同一时间完成。您只是在排队一堆提取，每个提取将在排队后 5 秒发生。如果您打算在每次提取之间等待 5 秒，那么这不是这样做的方法。
您的最终提取将一个数组连接到 URL。这最终会看起来像"/your/url/+url1,+url2"。那是你的意图吗？这是一个相当不寻常的 URL 架构。您可能希望将该调用更改为 POST 或 PUT，并在正文中传入 JSON 数组。
因为您对所有提取都调用setTimeout，所以您的最终提取实际上将在循环完成时完成，这可能在任何其他提取执行之前。您可能想使用 Promise.all 或类似的东西。

【讨论】：