我在代码的执行序列中遇到了意外行为。这是代码片段:
console.log("1"); await reloadScenarios(); console.log("2"); const reloadScenarios = () => { if (token) { getScenario() .then(({ scenarios }) => { console.log("3"); const transformedScenarios = scenarios.map(option => ({ scenario: option.name, description: option.categories.name, value: option._id })); setOptions(transformedScenarios); // setSelectedOption(transformedScenarios[0]?.value || null); }) .catch((error) => { console.error('Failed to fetch scenario options:', error); }); } };
我预计执行顺序是1,3,2。但是,当我运行代码时,实际顺序是1,2,3。有人可以解释一下为什么会发生这种情况吗?
此外,我注意到当我修改 reloadScenarios 函数以在 getScenario() 之前包含 return 语句时,执行顺序更改为 1, 3, 2 - 这是所需的顺序。我真的需要 return 语句,还是有其他解释来实现所需的序列?
您的问题是您正在使用await 来调用一个非异步且不返回Promise 的函数。由于该函数不返回 Promise,因此继续执行。
如果您希望显示的序列为“1,3 2”,那么您必须使用
async
标记您的函数这样,当您标记
await reloadScenarios
时,您正在等待承诺得到解决(或拒绝)。有关更多详细信息,请参阅文档:https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
编辑 抱歉,我忘了,还有一个问题:你还必须在函数中返回承诺