变量在异步 IIFE 之后未定义

Question

  let groupedWishlistProducts;

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

  console.log(groupedWishlistProducts); // logs undefined

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

Answer 1

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

事情执行的顺序是：

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

Answer 2

async function returns 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);
})

变量在异步 IIFE 之后未定义

Variable is undefined after async IIFE

javascript

async-await

iife