基于 ECMAScript 2020 (ES11) 的 WebExtension 开发 - Async/Await
WebExtension 是指跨浏览器的扩展程序，它允许开发者通过 JavaScript、HTML 和 CSS 等 web 技术来开发浏览器扩展，并可以在 Firefox、Chrome、Edge 等多个浏览器中进行部署。而 ES11 中的 Async/Await 是一种更为方便和可读性更高的异步编程方式，对于 WebExtension 的开发是非常有帮助的。
Async/Await 简介
在 ES6 中，我们引入了 Promise 这种异步编程方式，它可以将异步的代码串行化，使得代码的可读性和可维护性更好。但是在处理多个异步操作的场景、处理异步错误等方面仍然有些不够完美。于是，在 ES8 中，我们引入了 Async/Await 这种语法糖，使得异步编程更加方便和易读。
Async/Await 的含义和作用：
Async 是一个关键字，它可以声明一个异步函数，即这个函数返回值是一个 Promise 对象。
Await 也是一个关键字，它只能在异步函数内部使用，表示等待异步操作返回结果，当异步操作返回结果后，await 表达式的运算结果就是返回的结果。
使用 Async 的好处在于，它可以让我们将异步操作像同步操作一样写在函数内部。使用 Await 的好处在于，我们不用像 Promise 那样不断地嵌套回调函数了，在 Async 函数内部，我们可以像同步函数一样写异步操作的顺序。
WebExtension 开发中的 Async/Await
WebExtension 开发中涉及到很多涉及到异步操作，例如从远程服务器请求数据、处理浏览器事件、访问浏览器 API 等等。使用 Async/Await 可以使我们的代码更加优雅和简洁，下面将通过一个简单的示例来演示：
async function loadOptions() {
let data = await browser.storage.local.get("myOption");
return data.myOption;
}在这个示例中，我们通过异步函数 loadOptions() 从本地存储中读取 myOption 变量，并返回它的值。Async 关键字告诉 JavaScript 引擎该函数是异步函数，而 await 关键字告诉引擎等到 Promise 对象的结果返回了再继续往下执行。
除了上面这个简单的例子，我们还可以使用 Async/Await 来完成很多复杂的异步任务。例如，在 WebExtension 开发中使用异步函数来打开新的页面：
async function openNewTab() {
let tab = await browser.tabs.create({url: "https://example.com"});
return tab.id;
}在这个示例中，我们使用异步函数 openNewTab() 来创建一个新的页面，它等价于下面的 Promise 形式的代码：
function openNewTab() {
return browser.tabs.create({url: "https://example.com"})
.then(tab => tab.id);
}可以看到，Async/Await 让代码更加清晰和可读，使得异步编程变得更加方便。
总结
Async/Await 是一种更为方便和可读性更高的异步编程方式。在 WebExtension 开发中，我们可以使用 Async/Await 来管理异步任务、避免回调地狱，使得代码更加清晰和可读。需要注意的是，在使用异步函数时，我们需要通过添加 async 关键字来告诉引擎该函数是异步函数，而 await 关键字只能在异步函数内部使用。
关于作者
本文作者 Dotty，是一名资深前端工程师，热爱分享编程知识，喜欢开源，曾撰写多篇关于 Web 技术的文章。感兴趣的读者可以访问我的博客：https://dotty.blog
参考文章：
- ECMAScript 2020 - Async/Await: https://tc39.es/ecma262/#async-functions
- Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
（完）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651eb53895b1f8cacd661f26