Javascript - 处理异步竞争条件

Question

注意在删除之前： 我意识到类似的问题已经被问过很多次了，但是我花了几个小时尝试使用其他人的回复来实现这个，最近是来自 noseratio 在这个线程Proper way to wait for one function to finish before continuing? 中的回复并且没有成功。

---

我有一个 nodeJS 服务器，它在我的函数 f1 请求它时成功返回数据，另一个函数 f2 调用 f1 然后打算对这个异步函数的输出做一些事情。我正在尝试使用 async/await 语法和 f2 中的附加承诺来做到这一点，如下所示。

async function f1(){
   try{
       let response = await fetch('MY SERVER URL');
       let data = await response.json();
       return await data;
   }
   catch(e) {
       alert(e);
   }
};


function f2() {
    var promise = f1();
    promise.then(function(result) {
        JSONdata = promise.markers;
        console.log("JSON read into f2");
    })    

    console.log(JSONdata);

然后 f2 继续做其他事情......

但问题是我遇到了竞态条件，结果 f1 没有及时返回，无法对其进行任何操作，因此变量未定义。

任何关于如何减轻这种情况的帮助将不胜感激，谢谢。

Answer 1

坚持这种模式。

async func1() { 
  console.log('this is async function')
  return JSON.parse(await fetch(options))
}

func2 () { 
   console.log('this is not async function')
 }

        if(await func1()){
            func2()
        }

而且你在函数 1 中有太多的等待。只等待承诺的返回。 而且你不应该在这个级别上混淆'.then'和'await'语法。尝试坚持一种模式，然后探索另一种模式。然后混合它。

Answer 2

这样的事情应该可以工作：

async function f1() {
   try {
       const response = await fetch('MY SERVER URL')
       return await response.json()
   } catch(e) {
       console.error(e)
   }
}

async function f2() {
    const { markers } = await f1()
    console.log(`Result supplied to 'f2': ${markers}`)
}

在您的代码中，return await data 中的 await 是多余的，因为 data 不是承诺；此外，f2 似乎不完整。

请注意，虽然在一般情况下，return await... 在 async 函数中是不必要的（并且被认为是错误的形式，即使它是无害的），如果你想要一个周围的 try...catch 来捕捉承诺拒绝，那么 @ 987654329@ 是必要的。见here。

Answer 3

您应该在then 回调中移动使用f1 结果的逻辑。

function f2() {
    var promise = f1();
    promise.then(function(result) {
        var JSONdata = result.markers;
        console.log("JSON read into f2");

        console.log(JSONdata);
    });
}

或将f2 更改为async function，以便await 返回值。

async function f2() {
    var result = await f1();
    var JSONdata = result.markers;
    console.log("JSON read into f2");

    console.log(JSONdata);
}

如果您还没有，请查看MDN Using Promises 指南，该指南对它们进行了非常详尽的解释。当你了解了 Promise 的工作原理后，async/await 也会变得更容易理解。