# async / await
async 和 await 是一种更加优雅的异步编程解决方案,是Promise 的拓展,如果对 Promise 还不了解的话,请移步 Promise 章节进行学习。
在我们处理异步的时候,比起回调函数,Promise的then方法会显得较为简洁和清晰,但是在处理多个彼此之间相互依赖的请求的时候,就会显的有些繁琐。这时候,用async/await更加优雅。
我们知道 JavaScript 是单线程的,使用 Promise 之后可以让我们书写异步操作更加简单,而 async 是让我们写起 Promise 像同步操作。看下示例:
# 基本语法
前面添加了async的函数在执行后都会自动返回一个Promise对象:
function foo() {
return 'imooc'
}
console.log(foo()) // 'imooc'
相当于
async function foo() {
return 'imooc' // Promise.resolve('imooc')
// let res = Promise.resolve('imooc')
// console.log(res)
}
console.log(foo()) // Promise
foo()
await后面需要跟异步操作,不然就没有意义,而且await后面的Promise对象不必写then,因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
function timeout() {
return new Promise(resolve => {
setTimeout(() => {
console.log(1)
resolve() // resolve('success')
}, 1000)
})
}
// 不加async和await是2、1 加了是1、2
async function foo() {
await timeout() // let res = await timeout() res是success
console.log(2)
}
foo()
# 对于失败的处理
function timeout() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('success')
reject('error')
}, 1000)
})
}
async function foo() {
return await timeout()
}
foo().then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
在async函数中使用await,那么await这里的代码就会变成同步的了,意思就是说只有等await后面的Promise执行完成得到结果才会继续下去,await就是等待。
# 应用
还是前面案例中的异步操作,我们需要发送多个请求,而后面请求的发送总是需要依赖上一个请求返回的数据。对于这个问题,我们既可以用的Promise的链式调用来解决,也可以用async/await来解决,然而后者会更简洁些。
按顺序读取a.json、b.json、c.json,如果使用async/await该如何实现呢?
我们在static文件夹下放入三个json文件:
a.json:
{
"a": "我是A"
}
b.json:
{
"b": "我是B"
}
c.json:
{
"c": "我是C"
}
// 把ajax封装成模块
import ajax from './ajax'
function request(url) {
return new Promise(resolve => {
ajax(url, res => {
resolve(res)
})
})
}
async function getData() {
let res1 = await request('static/a.json')
console.log(res1)
let res2 = await request('static/b.json')
console.log(res2)
let res3 = await request('static/c.json')
console.log(res3)
}
getData()
注意
await 只能在 async 标记的函数内部使用,单独使用会触发 Syntax error。