Javascript - 处理异步竞争条件

Question

注意：在删除为重复之前：我意识到之前已经多次问过类似的问题，但是我花了几个小时尝试使用其他人的回答来实现这一点，最近这个线程中 noseratio 的响应等待一个函数的正确方法在继续之前完成？ 并没有成功。

---

我有一个 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}`)
}

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

请注意，虽然一般来说， return await...在async函数中是不必要的（并且被认为是糟糕的形式，即使它是无害的），但如果您想要一个周围的 try...catch 来捕获承诺拒绝，那么return await...是必要的。 见这里。

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也会变得更容易理解。