async和await-Toy模板网

这篇具有很好参考价值的文章主要介绍了async和await。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Node.JS官方文档：https://nodejs.dev/en/

创建异步函数，并返回相关数值：

一般方式创建

/*
    函数直接通过返回Promise成为异步函数
    异步函数：返回promise的函数称之为异步函数
*/ 
function fn(){
    
    return Promise.resolve(10)
}

// 读取结果需要通过then去读取
fn().then(r => {
    console.log(r)
})

通过async方式创建：

/*
    通过async可以快速的创建异步函数
*/

/*
    通过async可以来创建一个异步函数，fn2() 此时就是一个异步函数
        异步函数的返回值回自动封装到一个Promise中返回
*/
async function fn2(){
    return "async返回的数据10"
}

// 读取结果需要通过then去读取
fn2().then(r => {
    console.log(r)
})

在async声明的函数中可以使用await关键字来调用异步函数


/*
    在async声明的异步函数中可以使用await关键字来调用异步函数
*/


// 创建一个函数计算 a + b的结果，但是异步，即返回的Promise
function sum(a, b){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })

}

// 通过async创建一个异步函数
async function fn3() {
    sum(123, 456).then(r => {
        console.log(r)
    })

}

// 调用fn3()
fn3()

当我们通过await去调用异步函数时候，它会暂停代码的运行

直到异步代码执行有结果时，才会将结果返回

注意 await只能用于 async声明的异步函数中，或者es模块的紧急作用域中

await阻塞的只是异步函数内部的代码，不会影响外部代码

通过 await 调用异步代码时，需要通过try-catch来处理异常

/*
    在async声明的异步函数中可以使用await关键字来调用异步函数
*/


// 创建一个函数计算 a + b的结果，但是异步，即返回的Promise
function sum1(a, b){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })

}

/*
    Promise解决了异步调用中回调函数问题
        虽然通过链式调用解决了回调地狱，但是链式调用太多以后还是不好看
        但现在要求以同步的方式去调用异步的代码
*/
async function fn4() {
    // 链式调用
    // sum1(123, 456)
    //     .then(r => sum(r, 8))
    //     .then(r => sum(r, 8))
    //     .then(r => console.log(r))

    // 当我们通过await去调用异步函数时候，它会暂停代码的运行
    // 直到异步代码执行有结果时，才会将结果返回
    // 注意 await只能用于 async声明的异步函数中，或者es模块的紧急作用域中
    // await阻塞的只是异步函数内部的代码，不会影响外部代码
    // 通过 await 调用异步代码时，需要通过try-catch来处理异常
    
   
    try{

        let result = await sum(123, 456)
        result = await sum(result, 8)
        result = await sum(result, 9)

        console.log(result)
    }catch(e){
        console.log("出错了")
    }
    

    // awwit阻塞的是异步函数内部的代码
    // console.log(123)
    // console.log(222)
    // console.log(333)

}

// 调用fn3()
fn4()

// await不会阻塞外部代码
console.log("外部代码")

如果async声明的函数没有写await，那么它就会依次执行

// 如果async声明的函数中没有写await，那么它里面就会依次执行
async function fn4(){
    console.log(1)
    console.log(2)
    console.log(3)
    console.log(4)
    // 如果有return 
    return 10
}

fn4()


// fn4等价于fn5
function fn5() {
    return new Promise(resolve => {
        console.log(1)
        console.log(2)
        console.log(3)
        console.log(4)
        resolve(10) // return放在resolve中 fn4如果没有返回值，resolve就为空
    })
}

fn5()

console.log(5)  // 执行结果 1 2 3 4 5 1 2 3 4 5 6

使用await调用函数后，await当前函数后的所有代码，会先进入微任务队列

await后的所有代码，都会放入到微任务队列中执行文章来源地址https://www.toymoban.com/news/detail-432310.html

// 同步代码前加await
async function fn6(){
    console.log(111)
    /*
        当我们使用await调用函数后，await当前函数后的所有代码
            会在await当前函数执行完毕后，被列入微任务队列中
    */
    await console.log(112)
    // await后的所有代码，都会放入到微任务队列中执行
    console.log(113)
    
}

fn6()

console.log(222)  // 执行结果为 111 112 222 113

// 等价于

function fn7() {
    return new Promise(resolve => {
        console.log(111)
        // 上面的在此处加了await
        console.log(112)
        
        resolve()
    }).then(r => {
        console.log(113)
    })
}

到了这里，关于async和await的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！