数组上的 JavaScript Async/Await console.log() 返回空

Question

你好 Stack Overflow 社区，我带着一个与 JS async/await 相关的问题来找你。 我正在尝试调用一个异步函数，然后将数组记录到异步函数将结果推送到控制台的位置。 如果我直接在控制台中这样称呼它：

console.log(Page.data) - 我可以看到它有结果，但如果点击按钮调用它，它会记录一个空数组。

// It is a nested object so do not worry if you don't exactly understand where Page.data comes from
Page.data = []

async function f1() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}
async function f2() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}
async function f3() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}

async function load(loader) {
    let fn = async function() {};
    if(condition1) fn = f1;
    else if(condition2) fn = f2;
    else fn = f3;

    // This is the line that makes me problems
    // According to documentation async functions return a promise
    // So why would the array in the case be empty?
    // Since I am telling it to display after the function is done
    await fn(loader).then(console.log(Page.data))
}

这只是我的代码和逻辑的模板。 我希望你能理解我要去哪里。 您的帮助将不胜感激。

Answer 1

await 表达式会导致异步函数执行暂停，直到 Promise 被解决（即完成或拒绝），并在完成后恢复异步函数的执行。 恢复时， await 表达式的值是已完成的 Promise 的值。

例如（这是一个带有一些注释的 MDN 示例）：

function resolveAfter2Seconds(x) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  // note that here, you are "awaiting" the RESOLVED RESULT of the promise.
  // there is no need to "then" it.
  var x = await resolveAfter2Seconds(10);
  // the promise has now already returned a rejection or the resolved value. 
  console.log(x); // 10
}

f1();

所以你会“等待”你的函数，它会阻止执行，直到承诺解决或拒绝。 在该行之后，您将运行 console.log，它会按预期记录。 简短的回答，“删除然后”。

我应该补充一下，如果“awaited”函数的结果不是一个承诺，它会被转换为一个承诺（所以从技术上讲，没有必要返回一个承诺，它会为你包装你的返回值）。

Answer 2

问题是你可以使用then和await相同的方法，让我们检查一些MDN提供的例子：

这是一个使用async/await的有效Promise ：

 let myFirstPromise = new Promise((resolve, reject) => { setTimeout(function() { resolve("Success!"); }, 250) }) const functionCaller = async() => { const result = await myFirstPromise console.log("the result: ", result); } functionCaller();

你正在尝试的是：

 let myFirstPromise = new Promise((resolve, reject) => { setTimeout(function() { resolve("Success!"); }, 250) }) const functionCaller = async() => { // you are not returning anything here... actually you are not doing anything with the response. despite it shows something, it is not sending any response await myFirstPromise.then(console.log("something happened")) } // then this function doesn't really get a value. functionCaller();

所以你需要在你的load调用中做的是像这样改变它：

async function load(loader) {
    let fn = async function() {};
    if(condition1) fn = f1;
    else if(condition2) fn = f2;
    else fn = f3;

    return await fn(loader)
}