简而言之， async用于申明一个function是异步的；而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。
一、async和await的基础使用
async/awiat的使用规则:
- async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
- async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
- await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值
async 函数会返回一个promise对象
async function test() {}
console.log(test()) // 打出 Promise { undefined }
使用async和await：
async function test() {
let result = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
})
})
console.log(result)
}
test()
二、async/await的一个使用场景
在前端开发的过程里，偶尔会遇到多个请求，而后一个请求依赖之前请求的需求，如果要用promise的链式调用的话那么有几个请求就需要写几个then，我们简单模拟下：
let request = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
let random = Math.random()
if (random >= 0.1) {
resolve(time)
} else {
throw new Error('出错了')
}
}, time)
})
}
request(200).then((response) => { //注意这种链式调用的错误处理机制
console.log('第一次请求成功了', response)
return request(response + 200)
}).then((result) => {
console.log('第二次请求成功了', result)
return request(result + 200)
}).then(result => {
console.log('第三次请求成功了', result)
})
上面的其实图显麻烦，而如何我们用async-await的话就会简洁一些：
let request = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
let random = Math.random()
if (random >= 0.1) {
resolve(time)
} else {
throw new Error('出错了')
}
}, time)
})
}
async function test() {
let result01 = await request(200)
let result02 = await request(result01 + 200)
let result03 = await request(result02 + 200)
console.log(result03)
}
test()
记住， await后面一定要跟 promise对象
这样看起来就简洁了很多，可读性也增强了很多。但是因为await方法其实阻塞了代码，如果不是这种后面的请求依赖前面的请求的话，最好不要这样做。
上面的例子还可以继续扩展，如果遇到了需要继续处理result03的情况，还可以将result03 return一下，因为async函数返回的还是一个promise对象，所以可以用then方法接收。
如下：
async function test() {
let result01 = await request(200)
let result02 = await request(result01 + 200)
let result03 = await request(result02 + 200)
return result03
}
test().then(result => {
console.log(result)
})
三、async-await的错误处理机制
从上面的例子来看，async和await可以非常好的取代promise的then方法，尤其是在特定的多次请求的处理上，但是其中也存在着一个很明显的问题：错误处理不够清晰。上面的代码中，并没有看到针对错误进行的代码，而因为async函数本身会返回一个promise，这样就可以使用catch来捕捉async函数的错误了。
具体代码如下：
async function test() {
let result01 = await request(200)
let result02 = await request(result01 + 200)
let result03 = await request(result02 + 200)
return result03
}
test().then(result => {
console.log(result)
}).catch((error) => {
console.log(error)
})
四、在async函数中使用await和for循环
let request = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
let random = Math.random()
if (random >= 0.5) {
resolve(time)
} else {
reject('failed')
}
}, time)
})
}
let times = [1000, 2000, 3000]
let results = []
async function test() {
for (let time of times) {
let temp = await request(time)
results.push(temp)
}
console.log(results)
}
test().then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
console.log(111)
后半部分也可以借助Promise.all写成下面这样：
let times = [1000, 2000, 3000]
let results = []
async function test() {
let a = await Promise.all(times.map( async time => {
return await request(time)
}))
console.log(a)
return 'success'
}
test().then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
注意这里的Promise.all是极其必要的，如果去掉会有很大的不同。要注意一下。具体可以看这里https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop
需要特别注意的是：虽然async函数依然是异步的，但是里面await的Promise是同步的，这样就有可能造成代码阻塞。如果不是有需要完成不必这样做。
五、一个小测试
async function test() {
console.log(1)
let result = await Promise.resolve('success')
console.log(2)
return result
}
test().then(result => {
console.log(3)
}).catch(error => {
console.log(3)
})
console.log(4)
上面代码执行后打出来的数字的顺序是？
答案：1 4 2 3
网友评论