Javascript中立即调用的异步函数表达式

  在学习使用Playwright/Typescript的过程中看到这样的代码结构：

(async () => {
//代码体
})()

以下是ChatGPT生成的解释：

(async () => {})() 是一个 立即调用的异步函数表达式（Immediately Invoked Async Function Expression，简称 IIFE）。它包含几个关键点，下面逐一解释：

1. async () => {}

这是一个 异步箭头函数（async 函数）。在 JavaScript 中，async 函数总是返回一个 Promise。即使函数内部没有明确的 return，它也会自动将函数的返回值包装成一个 Promise 对象。异步函数可以使用 await 来等待异步操作（如网络请求、文件读取等）的完成。

在这段代码中，async () => {} 是一个匿名的异步箭头函数，它的作用是将包含异步逻辑的代码包装在一个函数中。

2. () (调用函数)

在 async () => {} 后面紧接着一个小括号 ()，这表示 立即调用 这个函数。这种模式常见于 JavaScript 中的 立即执行函数表达式（IIFE），它的作用是立即执行定义好的函数。这里加上了 async 关键字，使得这个函数变成了一个异步函数。

3. 完整结构解析

• (async () => { ... }) 定义了一个异步箭头函数。
• () 在函数定义后面调用这个异步函数，使得它在定义后立刻执行。

为什么要使用立即调用的异步函数（IIFE）？

1. 模块化代码：通过这种方式，你可以将异步操作封装在一个独立的作用域中，避免污染全局作用域。
2. 简洁性：如果你不想显式地定义一个函数，然后再调用它，可以直接使用这种简洁的方式立即执行代码。
3. 异步代码执行：在顶层使用 await 是不被允许的（因为它会阻塞后面的代码），所以我们需要通过一个异步函数来包装它，从而在函数内部使用 await。

举个例子

假设你有一段异步操作，不想单独创建函数，可以直接将异步操作写在立即调用的异步函数中：

(async () => {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    console.log(data);
})();

在这个例子中，异步操作是在一个匿名异步函数中执行的，这使得代码更紧凑且易于理解。