Javascript 在任何其他方法之前运行循环的第一个fetch方法

因此，我正在编写一个程序，要求我对数组中的每个对象依次运行三个获取方法。因为每个方法都在设置状态，所以在设置状态后，我会附加一个回调方法来调用下一个函数

我尝试过简单地一个接一个地调用函数而不进行回调的天真想法，但是由于每个函数都在修改状态，所以这不起作用

for (let i = 0; i < array.length; i++){
    this.executeA(array[i]);
}

executeA(data){
   fetch('http://localhost:8080/api/a', headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
       .then((response) => {
           response.json().then((res) => {
               this.setState({ a: res }, () => {
                   executeB(data);
               });
           });
        })

}

executeB(data){
   fetch('http://localhost:8080/api/b', headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
       .then((response) => {
           response.json().then((res) => {
               this.setState({ b: res }, () => {
                   execute(data);
               });
           });
        })
}

executeC(data){
   fetch('http://localhost:8080/api/c', headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
       .then((response) => {
           response.json().then((res) => {
               this.setState({ c: res }, () => {
                   console.log(this.state.c);
               });
           });
        })
}

for（设i=0；i{
response.json（）。然后（（res）=>{
this.setState（{a:res}，（）=>{
executeB（数据）；
});
});
})
}
executeB（数据）{
取（'http://localhost:8080/api/b，标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
})
。然后（（响应）=>{
response.json（）。然后（（res）=>{
this.setState（{b:res}，（）=>{
执行（数据）；
});
});
})
}
executeC（数据）{
取（'http://localhost:8080/api/c，标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
})
。然后（（响应）=>{
response.json（）。然后（（res）=>{
this.setState（{c:res}，（）=>{
console.log（this.state.c）；
});
});
})
}

---

例如，我希望长度为3的数组的操作顺序是A、B、C、A、B、C、A、B、C。相反，执行顺序是A、A、A、B、C、B、B、C。我不太清楚为什么第一个方法在调用任何其他方法之前执行数组中的每个对象，因为我认为在它设置状态之后，回调方法将转到下一个函数。谢谢你的澄清

如果您有一些承诺，您应该可能使用

async/await

和for循环中的

await

const someFunc = async () => {    
    for (let i = 0; i < array.length; i++){
        await this.executeA(array[i]); 
    }
}

const someFunc=async（）=>{
for（设i=0；i

并在

//获取内容

中添加

async/await

---

获得

AAABBBCCC

的原因是，在for循环中，您不必等待第一个

A

完成，就可以调用第二个

A

。您只需快速传递所有

A

。

问题是

executeA

在调用

后立即返回。setState

被调用（不等待传递给它的回调函数返回），这对您的所有函数都是正确的。为了保持同步，您可以创建新的承诺，并在设定状态后兑现这些承诺，以下是一个示例：

for (let i = 0; i < array.length; i++){
    await this.executeA(array[i]);
}

async executeA(data){
    const res = await fetch(....)
    return new Promise(resolve => this.setState({ b: res }, async () => {
            await executeB(data);
            resolve();
        });
    });
}

async executeB(data){
    const res = await fetch(....)
    return new Promise(resolve => this.setState({ b: res }, async () => {
            await executeC(data);
            resolve();
        });
    });
}

async executeC(data){
    const res = await fetch(....)
    return new Promise(resolve => this.setState({ c: res }, resolve));
}

for（设i=0；ithis.setState（{b:res}，async（）=>{
等待executeB（数据）；
解决（）；
});
});
}
异步执行EB（数据）{
const res=等待获取（…）
返回新的承诺（resolve=>this.setState（{b:res}，async（）=>{
等待执行（数据）；
解决（）；
});
});
}
异步执行（数据）{
const res=等待获取（…）
返回新的承诺（resolve=>this.setState（{c:res}，resolve））；
}

我的答案与其他人的答案非常相似，只是它是一个有效的例子。我希望有帮助

//*此部分仅用于测试
函数（键）{
返回新承诺（解决=>{
setTimeout（（）=>resolve（Math.random（）），Math.random（）*1000）；
});
}
//*/
常量数组=['A'，'B'，'C']；
异步函数runFor（elem）{
//*此部分仅用于测试
console.log（'runFor'，elem）；
this.setState=函数（状态）{
console.log（'setState'，state）；
};
//*/
等待fetchStuff（'a'）。然后（res=>{
this.setState（{a:res}）；
});
等待fetchStuff（'b'）。然后（res=>{
this.setState（{b:res}）；
});
等待fetchStuff（'c'）。然后（res=>{
this.setState（{c:res}）；
});
}
异步函数main（）{
for（设数组元素）{
等待runFor（elem）；
}
}
main（）

什么是

//获取素材

？@Vencovsky调用api，将立即更新问题，因为

这个问题不起作用。setState

不会返回

承诺

我不是发布问题的人，但即使你

等待
//获取素材
，你也不能等待
这个.setState
，你必须为它创建一个
Promise
。他所做的是
this.setState（{c:res}
看看变量名，
res
可能来自一个fetch调用，或者类似于
axios
的东西，这意味着他已经在承诺中设置了状态，所以是的，他可以使用
await/async
。只需添加
//fetch stuff
的代码，就可以更容易地解决第一个
的问题它
可以在不使用
异步函数包装的情况下工作
？@zer00ne此代码不是按原样运行的，只是一个示例来说明解决问题的方法。从语法上讲，该部分失败了，无助于说明您的观点。如果这是一个代码不起作用的示例，那么您已经成功了。拼写错误无助于解决问题er（参见第三个
fetch（）
拼写为
fatch（..）
）@zer00ne我已经修复了
fatch
，它更像是一个不一致性，而不是一个打字错误。这个例子是一种伪代码，循环内的
wait
不是唯一的JavaScript语法错误，在类的主体外声明函数也是一个语法错误。我的目标是让这个例子接近OP的exa这样他就可以理解了