在 JavaScript 中，异步编程是非常重要的一部分。在过去，我们使用回调函数来处理异步代码，但是这种方式很难维护和理解。ES6 引入了 Promise 和 Generator，这些新的特性让异步编程变得更加容易。而 ES7 则引入了 async/await，这是一种更加简单易用的异步编程方式。
async/await 让异步代码看起来像同步代码一样，这样我们就可以使用 try/catch 来处理错误。但是，async/await 并不是所有浏览器都支持的，因此我们需要使用 Babel 来将它转换成 ES5。
Babel 是什么？
Babel 是一个 JavaScript 编译器，它可以将 ES6 或者更新的 JavaScript 代码转换成 ES5 代码，这样我们就可以在所有浏览器上运行我们的代码。Babel 支持很多插件，我们可以根据我们的需求来选择需要的插件。
async/await 在 Babel 中的支持
要在 Babel 中支持 async/await，我们需要安装 babel-plugin-transform-async-to-generator 插件。这个插件会将 async/await 转换成 Generator 函数。我们也可以使用 babel-polyfill 来提供 Generator 函数的支持。
安装插件：
npm install --save-dev babel-plugin-transform-async-to-generator
在 .babelrc 中配置插件：
{
"plugins": [
"transform-async-to-generator"
]
}Error handling
使用 async/await 可以让我们使用 try/catch 来处理错误。但是在 Babel 转换后的代码中，错误处理可能会有些不同。我们需要使用 await 来等待 Promise 的结果，并且使用 try/catch 来处理错误。
以下是一个使用 async/await 的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return null;
}
}当 Babel 将这段代码转换成 ES5 代码时，它会变成这样：
// javascriptcn.com 代码示例
function fetchData() {
return regeneratorRuntime.async(function fetchData$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return regeneratorRuntime.awrap(fetch('/api/data'));
case 3:
response = _context.sent;
_context.next = 6;
return regeneratorRuntime.awrap(response.json());
case 6:
data = _context.sent;
return _context.abrupt("return", data);
case 10:
_context.prev = 10;
_context.t0 = _context["catch"](0);
console.error(_context.t0);
return _context.abrupt("return", null);
case 14:
case "end":
return _context.stop();
}
}
}, null, null, [[0, 10]]);
}可以看到，在转换后的代码中，try/catch 块被放在了一个 regeneratorRuntime.async 函数中。await 关键字也被转换成了 regeneratorRuntime.awrap 函数。
总结
async/await 是一个非常方便的异步编程方式，它可以让我们使用 try/catch 来处理错误。但是，在浏览器中并不是所有的浏览器都支持 async/await。因此，我们需要使用 Babel 来将它转换成 ES5 代码。在 Babel 转换后的代码中，我们需要使用 await 来等待 Promise 的结果，并且使用 try/catch 来处理错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657573a4d2f5e1655dea73a4