# 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。

推荐阅读

最后更新时间: 2/28/2023, 8:33:37 PM