如果出现错误，请在评论中指出，我也好自己纠正自己的错误
author： thomaszhou
让我们开始学习async和await
async/await使用同步的思维，来解决异步的问题。
-
async的优点利用async创建的函数也是异步函数，就像setTimeout那种一样async/await 的优势在于处理 then 链:- 如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了，因为promise参数传递太麻烦了，而async/await特别方便
- async可以直接接收传递的变量，但是peomise的then是独立作用，如果要取值，就要将部分数据暴露在最外层，在 then 内部赋值一次.
-
相比较generator- （1）内置执行器。 Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
- （2）更好的语义。 async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。
- （3）更广的适用性。 co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
同步和异步的理解：当我们发出了请求，并不会等待响应结果，而是会继续执行后面的代码，响应结果的处理在之后的事件循环中解决。那么同步的意思，就是等结果出来之后，代码才会继续往下执行。
我们可以用一个两人问答的场景来比喻异步与同步。A向B问了一个问题之后，不等待B的回答，接着问下一个问题，这是异步。A向B问了一个问题之后，然后就笑呵呵的等着B回答，B回答了之后他才会接着问下一个问题，这是同步。
1、安装支持
babel已经支持，所以我们可以在webpack中使用 首先在当前项目中使用npm下载babel-loader。
npm install babel-loader --save-dev
然后在配置文件webpack.confing.dev.js中配置，在module.exports.module.rules中添加如下配置元素即可。
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
如果你使用最新版本的create-react-app或者vue-cli来构建你的代码，那么它们应该已经支持了该配置。
2、普通声明和await使用
- async函数实际上返回的是一个Promise对象
async function fn() {
return 30;
}
// 或者
const fn = async () => {
return 30;
}
在声明函数时，前面加上关键字async，这就是async的用法。当我们用console.log打印出上面声明的函数fn，我们可以看到如下结果：
console.log(fn());
//result
Promise = {
__proto__: Promise,
[[PromiseStatus]]: "resolved",
[[PromiseValue]]: 30
}
很显然，fn的运行结果其实就是一个Promise对象。因此我们也可以使用then来处理后续逻辑。
fn().then(res => {
console.log(res); // 30
})
await的使用-------------------
await的含义为等待。就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。
但是我们需要注意的是，await关键字只能在async函数中使用。并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。
当我们使用一个变量去接收await的返回值时,如：const temp = await fn();该返回值temp为Promise中resolve出来的值（也就是PromiseValue）。
// 定义一个返回Promise对象的函数
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(30);
}, 1000);
})
}
// 然后利用async/await来完成代码
const foo = async () => {
const t = await fn(); // 将30传入
console.log(t);
}
foo();
console.log('begin')
// begin
// 30
首先我们定义了一个函数fn（），这个函数返回Promise，并且会延时 1 秒，resolve并且传入值30，foo函数在定义时使用了关键字async，然后函数体中配合使用了await，最后执行foo（）。整个程序会在 1 秒后输出30，也就是说foo（）中常量t取得了fn（）中resolve的值，并且通过await阻塞了后面的代码执行，直到fn（）这个异步函数执行完。
运行这个例子我们可以看出，当在async函数中，运行遇到await时，就会等待await后面的函数运行完毕，而不会直接执行next code。
可以看到begin优先输出，是因为async/await创建的foo（）函数也是异步函数，所以你懂的
如果我们直接使用promise的then方法的话，想要达到同样的结果，就不得不把后续的逻辑写在then方法中。
const foo = () => {
return fn().then(t => {
console.log(t);
console.log('next code');
})
}
foo();
很显然如果使用async/await的话，代码结构会更加简洁，逻辑也更加清晰。
从代码片段中不难看出 Promise 没有解决好的事情，比如要有很多的 then 方法，整块代码会充满 Promise 的方法，而不是业务逻辑本身.
而且每一个 then 方法内部是一个独立的作用域，要是想共享数据，就要将部分数据暴露在最外层，在 then 内部赋值一次.
虽然如此，Promise 对于异步操作的封装还是非常不错的，所以 async/await 是基于 Promise 的，await 后面是要接收一个 Promise 实例。
3、异常处理
在Promise中，我们知道是通过catch的方式来捕获异常。而当我们使用async时，则通过try/catch来捕获异常。
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error.');
}, 1000);
})
}
const foo = async () => {
try {
await fn();
} catch (e) {
console.log(e); // some error
}
}
foo();
await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。
如果有多个await函数，那么只会返回第一个捕获到的异常。
function fn1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error fn1.');// 设置reject
}, 1000);
})
}
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error fn2.'); // 设置reject
}, 1000);
})
}
const foo = async () => {
try {
await fn1();
await fn2();
} catch (e) {
console.log(e); // some error fn1.
}
}
foo();
async
4、async/await 的优势在于处理 then 链
单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有意思，Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。
例子一：
假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：
/**
* 传入参数 n，表示这个函数执行的时间（毫秒）
* 执行的结果是 n + 200，这个值将用于下一步骤
*/
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
- Promise 方式来实现这三个步骤的处理
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
- async/await 方式来实现这三个步骤的处理
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样
例子二：
现在把业务要求改一下，仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(m, n) {
console.log(`step2 with ${m} and ${n}`);
return takeLongTime(m + n);
}
function step3(k, m, n) {
console.log(`step3 with ${k}, ${m} and ${n}`);
return takeLongTime(k + m + n);
}
- 用 async/await 来写：
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
除了觉得执行时间变长了之外，似乎和之前的示例没啥区别啊！别急，认真想想如果把它写成 Promise 方式实现会是什么样子？
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
有没有感觉有点复杂的样子？那一堆参数处理，就是 Promise 方案的死穴—— 参数传递太麻烦了，看着就晕！
5、await in for 循环
- await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。（注意想forEach，map，reduce这种也是函数！！！！）
- 正确的写法是采用 for 循环。!!!!
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 报错
docs.forEach(function (doc) {
await db.post(doc);
});
}
上面代码会报错，因为 await 用在普通函数之中了。但是，如果将 forEach 方法的参数改成 async 函数，也有问题。
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 可能得到错误结果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用 for 循环。
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
- 如果确实希望多个请求并发执行，可以使用 Promise.all 方法。
- 先将多个函数（任务）都保存到doc这个数组中，就可以保存多个任务，然后再实现并发执行
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
// 或者使用下面的写法
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 将多个函数（任务）都保存到doc这个数组中，就可以保存多个任务，然后再实现并发执行
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
6、实践
在实践中我们遇到异步场景最多的就是接口请求，那么这里就以jquery中的$.get为例简单展示一下如何配合async/await来解决这个场景。
// 先定义接口请求的方法，由于jquery封装的几个请求方法都是返回Promise实例，因此可以直接使用await函数实现同步
const getUserInfo = () => $.get('xxxx/api/xx');
const clickHandler = async () => {
try {
const resp = await getUserInfo();
// resp为接口返回内容，接下来利用它来处理对应的逻辑
console.log(resp);
// do something
} catch (e) {
// 处理错误逻辑
}
}
7、一个问题测试
题目
可修改下面的 aa() 函数，目的是在一秒后用 console.log() 输出 want-value
function aa() {
setTimeout(function() {
return "want-value";
}, 1000);
}
- 但是，有额外要求：
- aa() 函数可以随意修改，但是不能有 console.log()
- 执行 console.log() 语句里不能有 setTimeout 包裹
解答
问题的主要目的是考察对异步调用执行结果的处理，既然是异步调用，那么不可能同步等待异步结果，结果一定是异步的
setTimeout() 经常用来模拟异步操作。最早，异步是通过回调来通知（调用）处理程序处理结果的
function aa() {
return new Promise((resolve) => {
setTimeout(function() {
resolve('want-value');
},1000);
});
}
async function fn() {
let temp = await aa();
console.log(temp);
}
fn();
参考文章：
