async/await关键字

async/await关键字

ES6新增了关键字async和await，我第一次看到这个关键字是别人分享的一个小程序项目中，因为没有见过async和await，就百度搜了一下，关于async和await的解释有很多，在文章的最后推荐两篇阅读文章

async

async用于声明一个异步函数，而且async本身的意思就是“异步的”，它的优势在于处理then式调用链

async函数返回的是一个Promise对象，如果在函数中return一个值，async内部会调用Promise.resolve()帮你封装成一个Promise对象，如果async函数内部抛出错误，内部就会调用Promise.reject()返回Promise对象，在函数的外层不能用await关键字的时候，我们需要用.then()来处理Promise对象，例如：

async function test1() {

    return 1

}



console.log(test1())    // Promise {<fulfilled>: 1}



test1().then(res => {

    consoloe.log(res)   // 1

})

async function test2() {

    const p1 = Promise.resolve(1)

    p1.then(res => {

        console.log(1)

    })

    const result = await p1

    console.log(result)     // 1

}

现在想想，如果async函数没有返回值的话会得到什么？下面会给出答案

await

顾名思义，await是在等待一个返回值，后面接的可以是函数也可以是一个直接的值，await会把普通的值封装成Promise对象，然后等待Promise对象解析，不再向下执行，等待Promise对象解析完毕拿到返回结果后，继续向下执行，例如

async function test3() {

    const result = await 3  // 相当于 await Promise.resolve(3)

    console.log(result)     // 3

}

如果async的函数没有任何返回值的话，得到的是undefined

async function test5() {

    console.log("test5")

}

async function test() {

  const result = await test5()

  console.log(result)   // undefined

}

注意：await关键字只能放在async函数内部

下面来用模拟异步请求来解释async和await的作用

function returnAfter2seconds(number) {

    return new Promise(resolve => {

        setTimeout(() => {

            resolve(number)

        }, 2000);

    } )

}   // 该函数用于模拟异步请求，2秒后返回number

async function testResult() {

    let first = await returnAfter2seconds(30);

    let second = await returnAfter2seconds(50);

    let third = await returnAfter2seconds(30);

    console.log(first + second + third);    // 6s后，控制台输入110

}

到这里我们可以知道async和await的作用，它让我们在实际写代码的时候摆脱回调地狱

再比如：如果下面这段代码不用async和await的话是这样的

function getZhihuColumn(id) {

    const url = `https://zhuanlan.zhihu.com/api/columns/${id}`

    axios.get(url).then(res => res.json())

                  .then(column => {

                    console.log(`Name: ${column.name}`)

                    console.log(`Intro: ${column.intro}`)

    })

}

getZhiHuColumn('feweekly')

如果用async和await关键字的话，下面这段代码就变得像同步代码一样，相当整洁美观

async function getZhihuColumn(id) {

    const url = `https://zhuanlan.zhihu.com/api/columns/${id}`

    const res = await axios.get(url)

    const column = await res.json()

    console.log(`Name: ${column.name}`)

    console.log(`Intro: ${column.intro}`)

}

getZhiHuColumn('feweekly')

有没有感觉本来挺乱的一下变得整洁了不少，其实Promise的出现就是为了解决异步回调，而async/await的出现又是为了优化它，让异步的代码看起来像是同步的，可能这就是解决回调地狱的终极方法吧

最后分享一道字节一面真题：“async和await用过吗，是做了什么呢？async的返回值是什么”。

相信你看完这篇文章后能得到答案哦

其实这本来是一次在别人的源码中无意的发现，但是遇到没有见过的关键字深究其中会学习到很多的知识，虽然async和await在实际代码中不会用到很多，但是一旦有能用到它的地方一定会帮助到我们不少

推荐阅读

1. 一次性让你懂async/await，解决回调地狱
2. 理解 JavaScript 的 async/await