前端代码：async、await新特性的使用，需要注意什么？

ES2017标准引入了async、await函数，使得异步操作变得更加方便了，而不用每次`new Promise(...)`了

本文还使用到了es6的其他特性，例如箭头函数`=>`，以及不用说的`Promise`，所以为了在生产上兼容，需要引入babel-polyfill，并对代码进行Babel处理。这里暂时不对相关知识进行细说。

如果你使用最新版的Chrome浏览器进行开发调试，就可以暂时不用关心相关知识了。

1 基本用法

1.1 async

async`其实是`Promise`语法糖。我们首先来写一个`Promise`：

Promise

将其改为`async`写法：

async

可以看到使用`async`语法糖后，`asyncWork`代码量减少了，特别是在代码逻辑

1.2 await

往往使用`await`的函数需要使用`async`。

`async`表示异步，而`await`表示需要等待。进一步说，`async`函数可以看成将异步操作包装成一个Promise对象，而`await`就是`then`命令的语法糖。

await使用方法：

当然，也可以将上面的`asyncWork`方法改为使用`Promise`。

2 进阶踩坑

既然使用了javaScript的ES2017特性，那么你一定会使用箭头函数`=>`。相应的，在实际项目中，为了兼容性，我们会使用`babel-preset-env`等进行转义。

坑来了，我们将上面的`doWork`方法改为如下：

async、await

我们来创建两个文件`index.html`、`main.js`来进行验证:

`index.html`:

index.html

`main.js`:

main.js

这里，我们使用`Pracel`来进行打包。Parcel号称极速零配置Web应用打包工具，但是还是需要一点点配置的（当然也有一些限制），不过比那个vue-cli的webpack模板配置要简单多了!!!

使用`npm init`或者`yarn init`对项目初始化后，命令行运行：`parcel index.html`，运行结果：

error

OMG!!!竟然报错了，什么情况？`async`、`await`这对鸳鸯成对出现了，怎么还会报错？！

且慢，我们不妨看看`Parcel`对`doWork`的处理结果是什么。我们打开项目下的dist文件夹。dist文件夹下存放了`Parcel`的打包结果。

dist

...

哈哈，竟然只有`index.html`文件。那我们上述`doWork`函数改一下：

不使用箭头函数

再次运行`parcel index.html`，编译成功：

机智的我们发现是箭头`=>`函数在添乱。我们再看一下es6中`=>`的定义：

箭头函数

那上面包含箭头函数的`doWork`也就等同于：

无箭头函数

外层的`doWork`函数和包裹await的函数已经不是同一个函数了，所以`Parcel`编译失败。如果想继续使用箭头函数，可以改为：

async、await

所以，`async`、`await`、`=>`等es6特性，在使用时要注意它们的作用，避免增加不必要的调试时间。