为何全局声明的groupedWishlistProducts在async IIFE后仍为undefined？

这是个非常典型的JavaScript异步执行顺序问题，咱们一步步拆解原因：

代码执行的先后顺序 #

先梳理你的代码执行流程：

1. 首先在全局作用域声明了groupedWishlistProducts，但未赋值，所以它的初始值是undefined。
2. 你定义了一个异步立即执行函数（IIFE），调用后函数里遇到await fetchGroupedWishlistProducts()——此时JavaScript会把这个异步请求放到「任务队列」中，暂停当前异步函数的执行，转而优先执行后续的同步代码。
3. 接下来直接执行全局的console.log(groupedWishlistProducts)，这时候异步请求还没完成，变量还没被赋值，所以打印出undefined。
4. 等所有同步代码执行完毕，JavaScript才会处理任务队列里的异步任务，此时fetchGroupedWishlistProducts()的结果返回，给全局变量完成赋值，然后执行异步函数里的console.log，就能正常打印返回值了。

解决办法 #

想要拿到异步赋值后的变量，必须保证依赖代码在异步操作完成后执行，这里给你几个常用方案：

方案1：把依赖代码放在异步函数内部

let groupedWishlistProducts;
(async function () {
  groupedWishlistProducts = await fetchGroupedWishlistProducts();
  console.log(groupedWishlistProducts); // 正常打印返回值
  // 所有需要使用groupedWishlistProducts的逻辑都放在这里
})();

方案2：使用.then()链式处理异步结果

如果你不习惯用async/await，也可以用Promise的链式调用：

let groupedWishlistProducts;
fetchGroupedWishlistProducts()
  .then(result => {
    groupedWishlistProducts = result;
    console.log(groupedWishlistProducts); // 正常打印返回值
    // 后续依赖逻辑写在这里
  });

注意：这里全局的console.log还是会先打印undefined，因为同步代码优先执行。

方案3：使用顶级await（现代环境支持）

如果你的运行环境支持顶级await（比如现代浏览器、Node.js 14.8及以上版本），可以不用IIFE，直接在全局作用域使用await：

let groupedWishlistProducts = await fetchGroupedWishlistProducts();
console.log(groupedWishlistProducts); // 正常打印返回值

核心要点 #

JavaScript是单线程语言，异步任务会被延后执行，所有依赖异步结果的代码必须等待异步操作完成后再执行，不能在同步代码里直接获取还未被异步赋值的变量。

内容的提问来源于stack exchange，提问作者Badal Saibo