异步 IIFE 后变量未定义答案

【问题标题】：Variable is undefined after async IIFE异步 IIFE 后变量未定义
【发布时间】：2020-12-19 05:09:06
【问题描述】：

  let groupedWishlistProducts;

  (async function () {
      groupedWishlistProducts = await fetchGroupedWishlistProducts();
      console.log(groupedWishlistProducts); // logs returned value properly
  })();

  console.log(groupedWishlistProducts); // logs undefined

为什么groupedWishlistProducts 在全局范围内未定义，即使我已在全局范围内初始化？

【问题讨论】：

这能回答你的问题吗？ Why async/await variable return undefined?
对不起，没有。我想知道每个步骤的执行顺序。

标签： javascript async-await iife

【解决方案1】：

它是未定义的，因为你还没有给它分配任何东西（还）。

事情的执行顺序是：

声明变量
声明并开始执行 IIFE
调用 fetchGroupWishlistProducts
已达到await，IIFE 现在返回到外部代码。
记录 groupedWishlistProducts（函数外）
一段时间后，来自 fetchGroupedWishlistProducts 的承诺解决，异步功能恢复
将 fetchGroupedWishlistProduct 的 promise 的结果分配给 groupedWishlistProducts
记录 groupedWishlistsProducts（函数内部）

【讨论】：

#4 应该是 "由于异步，IIFE 现在返回一个承诺"
我描述的是事情发生的顺序，所以#4 描述的是它返回的when。 await 关键字是导致它在那个时间返回的原因，而不是另一个时间。我已经改写它以强调时间，而不是价值。

【解决方案2】：

async function 返回Promise，所以当你执行 IIFE 时，Promise 仍然处于等待状态，因为结果 fetchGroupedWishlistProducts() 不会被解析。所以在你的情况下，第二个console.log将首先被执行，并且是undefined

要处理这个问题，您可以将其包装到另一个 IIFE 中

let groupedWishlistProducts;

(async function() {
  
  await (async function () {
    groupedWishlistProducts = await fetchGroupedWishlistProducts();
    console.log(groupedWishlistProducts); // logs returned value properly
  })();

  console.log(groupedWishlistProducts);

})()

或者只是解决承诺

let groupedWishlistProducts;

(async function () {
  groupedWishlistProducts = await fetchGroupedWishlistProducts();
  console.log(groupedWishlistProducts); // logs returned value properly
})().then(() => {
  console.log(groupedWishlistProducts);
})

【讨论】：