Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

ES系列文章

async/await

async/await是另一种异步方程的解决方案。比如es6中的Promise和Generator。es8中的 async/await异步解决方案比es6中的Promise和Generator更加优雅。

async

async函数就是Generator函数的语法糖

普通函数

function foo() {
    return 'imooc'
}
console.log(foo())

async function foo(){
    return 'imooc' // Promise.resolve('imooc')
}
console.log(foo())

async函数执行成功会自动返回promise对象，async关键字必须写在function前面，Generator写在function后面

await

async function foo() {
    let result = await 'imooc'
    console.log(result)
}
foo()

await关键字后面应该是异步操作，而不是基本数据类型。

function timeout() {
    return new Promise(resolve => {
        setTimeout(()=>{
            // console.log(1)
            resolve(1)
        }, 1000)
    })
}
async function foo(){
    const res = await timeout()
    console.log(res)
    console.log(2)
}
foo()

async与await一些注意关键点小结

await关键字必须位于async函数内部
await关键字后面需要一个promise对象
await关键字的返回结果就是其后面Promise执行的结果，可能是resolved或者rejected的值，注意最后执行完的是个值。
不能在普通箭头函数中使用await关键字，需要在箭头函数前面添加async
await用来串行的执行异步操作，现实现并行可以考虑promise.all

function timeout() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('success')
            reject('fail')
        }, 1000)
    })
}
async function foo() {
    return await timeout()
}
foo().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err)
})

应用场景

// 伪代码
//异步
async function request(){
    const data = await axios.get('http://www.xx.com')
    console.log(data)
}

有promise的列子参考就行

import ajax from './ajax'

function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData(){
    const res1 = await request('static/a.json')
    console.log(res1)
    const res2 = await request('static/b.json')
    console.log(res2)
    const res3 = await request('static/c.json')
    console.log(res3)
}
getData()function foo() {
    return 'imooc'
}
console.log(foo())

async function foo(){
    return 'imooc' // Promise.resolve('imooc')
}
console.log(foo())

async function foo() {
    let result = await 'imooc'
    console.log(result)
}
foo()

function timeout() {
    return new Promise(resolve => {
        setTimeout(()=>{
            // console.log(1)
            resolve(1)
        }, 1000)
    })
}

async function foo(){
    const res = await timeout()
    console.log(res)
    console.log(2)
}
foo()

function timeout() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('success')
            reject('fail')
        }, 1000)
    })
}
async function foo() {
    return await timeout()
}
foo().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err)
})

// 伪代码
async function request(){
    const data = await axios.get('http://www.xx.com')
    console.log(data)
}

import ajax from './ajax'

function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData(){
    const res1 = await request('static/a.json')
    console.log(res1)
    const res2 = await request('static/b.json')
    console.log(res2)
    const res3 = await request('static/c.json')
    console.log(res3)
}
getData()

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES8 | async/await