当前位置 博文首页 > 彭加李：es6快速入门 系列 - async
其他章节请看：
es6 快速入门 系列
前文我们已经知道 promise 是一种异步编程的选择。而 async 是一种用于执行异步任务更简单的语法。
Tip：建议学完 Promise 在看本文。
async 函数是使用 async 关键字声明的函数。就像这样：
async function fa(){
}
async 函数可以看作由多个异步操作包装成的一个 Promise 对象。
async 函数总是返回一个 Promise 对象。如果一个 async 函数的返回值看起来不是 promise，那么它将会被隐式地包装在一个 promise 中。请看示例：
async function fa() {
return 1
}
// 等价于
function fa() {
return Promise.resolve(1)
}
console.log( fa() instanceof Promise) // true
即使 async 方法中没有显示的 return ，async 方法仍会返回 Promise。请看示例：
async function fa() {}
console.log( fa() instanceof Promise)
fa 方法等价于：
function fa() {
return Promise.resolve()
}
async 函数有多种使用形式。例如：
// 函数表达式
const fa = async funciton() {};
// 对象的方法
let obj = {async foo(){}}
// Class 的方法
class Dog{
async say(){}
}
// 箭头函数
const fa = async () => {}
形式虽然很多，但都是在函数前面增加 async 关键字。
async 函数内的 return 返回值，会成为 then() 方法回调函数的参数。请看示例：
async function foo() {
return 'hello'
}
foo().then(v => {
console.log(v)
})
// hello
async 函数内部抛出的错误会导致返回的 Promise 对象变为 reject 状态。抛出的错误对象会被 catch 方法回调接收到。请看示例：
async function foo() {
throw new Error('fail')
return 'hello'
}
foo().catch(v => {
console.log(v.message)
})
// fail
async 函数返回的 Promise 对象必须等到内部所有 await 命令后的 Promise 对象执行完才会发生状态变化，除非遇到 return 语句，或者抛出错误才会立刻结束。请看示例：
function createPromise(val, time = 1000){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(val)
resolve(val)
}, time)
})
}
async function foo() {
let a = await createPromise(1)
let b = await createPromise(2)
return {a, b}
}
foo().then(v => {
console.log(v)
}, v => {
console.log(v.message)
})
/*
1
2
{ a: 1, b: 2 }
*/
这段代码需要 2 秒，等待内部两个 Promise 状态都置为已完成，才会输出 { a: 1, b: 2 }。
如果遇到 return 或者抛出错误，则会立即结束。就像这样：
async function foo() {
// 遇到 return
return 1
// 或抛出错误
// throw new Error('fail')
let a = await createPromise(1)
let b = await createPromise(2)
return {a, b}
}
asyn 函数可能包含 0 个或多个 await 表达式。就像这样：
async function fa() {
return await 1
}
await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值。
首先看一段代码：
async function fa() {
const result = await 1
return result
}
fa().then(v => {
console.log(v)
})
// 1
为什么 result 是 1？
首先，因为 await 命令后面是一个 Promise 对象。如果不是，会被转为一个立即 resolve 的 Promise 对象。所以下面 fa() 方法是相等的：
async function fa() {
return await 1
}
// 等价于
async function fa() {
return await Promise.resolve(1)
}
而在 Promise 中所学，我们知道 fa() 方法又等于如下代码：
async function foo() {
return await new Promise((resolve, reject) => {
resolve(1)
})
}
其次，Promise 的解决值会被当作该 await 表达式的返回值。所以 result 等于 1。
如果删除 fa() 方法中的 return，将输出 undefined。请看示例：
async function fa() {
// 删除 return
await 1
}
fa().then(v => {
console.log(v)
})
// undefined
await 命令后的 Promise 对象如果变成 reject 状态，则 reject 的参数会被 catch 方法回调函数接收。就像这样：
async function foo() {
await Promise.reject(1) // {1}
}
foo().then(v => {
console.log(v)
}).catch(v => {
console.log(`catch, ${v}`)
})
// catch, 1
请注意，await 语句（行{1}）前面没有 return 语句，但是 reject() 方法的参数依然传入了 catch 方法的回调函数中，这点与 resolve 状态不相同。
只要一个 await 语句后面的 Promise 变成 reject，那么整个 async 函数都会中断。请看示例：
async function foo() {
await Promise.reject(1)
await new Promise((resolve, reject) => {
console.log(2)
resolve()
})
return 3
}
foo().then(v => {
console.log(v)
}).catch(v => {
console.log(`catch, ${v}`)
})
// catch, 1
由于第一个 await 后面的 Promise 变成 reject，整个 async 函数就中断执行。
如果我们希望前一个异步操作失败，也不中断后面的异步操作，可以这么写：
try{
await Promise.reject(1)
}catch(e){
}
// 亦或者
// 在 Promise 一文中提到拒绝处理程序能恢复整条链的执行
await Promise.reject(1).catch(() => {})
...
如果 await 后面的异步操作出错，那么等同于 async 函数返回的 Promise 对象被 reject。就像这样：
async function foo() {
await new Promise((resolve, reject) => {
throw new Error('fail')
})
return 3
}
foo().then(v => {
console.log(v)
}).catch(v => {
console.log(`catch, ${v}`)
})
// catch, Error: fail
防止出错的方法也是将其放在 try ... catch 方法中。下面例子使用 try...catch 实现多次尝试：
function request(v){
return new Promise((resolve, reject) => {
if(v == 2){
console.log(`resolve${v}`)
resolve(v)
}else{
console.log(`fail${v}`)
throw new Error('fail')
}
})
}
async function foo() {
for(let i = 0; i < 5; i++){
try{
await request(i)
break
}catch(e){} // {1}
}
return 'end'
}
foo().then(v => {
console.log(v)
}).catch(v => {
console.log(`catch, ${v}`)
})
// fail0 fail1 resolve2 end
这段代码，如果 await 操作成功，则会使用 break 语句退出循环；如果失败，则会被 catch（行{1}） 捕获，然后进入下一轮循环。
下面的代码，会依次输出 1 和 2，属于串行。
function createPromise(val, time = 1000){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(val)
resolve(val)
}, time)
})
}
async function foo() {
let a = await createPromise(1)
let b = await createPromise(2)
}
foo()
// 1 2
如果多个异步操作不存在继发关系，最好让它们同时触发。将 foo() 方法改为下面任一方式：
// 方式一
async function foo() {
let p1 = createPromise(1)
let p2 = createPromise(2)
// 至此，两个异步操作都已经发出
await p1
await p2
}
// 方式二
async function foo() {
let [p1, p2] = await Promise.all([createPromise(1), createPromise(2)])
}
再次运行，只需要 1 秒就会同时输出 1 2。
await 关键字只能用在 async 函数中。请看示例：
async function fa(){
let arr = [1, 2, 3]
arr.forEach(v => {
await v
})
}
// SyntaxError: await is only valid in async function
这段代码将报语法错误。
如果将 forEach 方法的参数改为 async 函数，就像这样：
function createPromise(val, time = 1000){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(val)
resolve(val)
}, time)
})
}
async function fa(){
let arr = [1, 2, 3]
// 改为 async 函数
arr.forEach(async v => {
await createPromise(v)
})
}
fa()
// 1 2 3
等待 1 秒后同时输出 1 2 3。因为这 3 个异步操作是并发执行。
如果希望多个请求并发执行，也可以使用 Promise.all 方法。就像这样：
// 替换 fa() 方法即可
async function fa(){
let arr = [1, 2, 3]
let promises = arr.map(v => createPromise(v))
let results = await Promise.all(promises)
console.log(results)
}
而如果需要继发，可以采用 for 循环：
// 替换 fa() 方法即可
async function fa(){
let arr = [1, 2, 3]
// 将 forEach 改为 for 循环
for(let i = 0; i < arr.length; i++){
await createPromise(arr[i])
}
}
每过一秒，会依次输出 1 2 3。
其他章节请看：
es6 快速入门 系列
