demo_09 async&await

Posted luwei0915

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了demo_09 async&await相关的知识,希望对你有一定的参考价值。

// async位于函数字面量或函数表达式的前面(普通函数,立即执行函数,箭头函数均可),被修饰函数的返回一个Promise对象
// 简化Promise的使用过程,让你的异步代码看起来像是同步的

/*
await一定要位于async函数内部
await一般位于Promise对象之前,所以一般位于async函数执行的前面,但若是返回值为Promise对象的普通函数也可
await会拿到该对象的结果,也就是then中resolve或reject的参数。如果不是Promise对象,则直接返回对应的值
若await后方不是Promise对象,则会将其用Promise.resolve包装后执行
await的执行会被强制等待至拿到结果,后续函数体内的代码执行被阻塞,函数本身不会阻塞整体代码
*/

// 案例1:基本使用 *************************************
/*

// function chloe() {
//     return new Promise((resolve, reject) => {
//         console.log("chloe");
//         resolve(20);
//     });
// }

// 以上等价于:
async function chloe() {
    console.log("chloe");
    return 20;
}

async function taran() {
    // chloe函数执行返回出一个Promise对象, await拿到该对象resolve的参数20, 赋值给age
    const age = await chloe();
    console.log("taran" + age);
}

taran();

输出:
chloe
taran20

*/

// 案例2: 掷色子,使用async和await获取成功的结果 *************************************
/*

// 下面这段代码async中使await 摇色子()先执行,等到三秒后执行完再把得到的结果赋值给左边的n,
// 也就是说test函数需要三秒钟才执行完成,所以test函数是异步的,因此前面必须写async
function 摇色子() {
    return new Promise((resolve, reject) => {
        let sino = parseInt(Math.random() * 6 + 1)
        setTimeout(() => {
            resolve(sino)
        }, 3000)
    })
}
async function test() {
    let n = await 摇色子()
    console.log(n)
}

test()

输出:2

*/

// 案例3: 获取失败的结果
/*

function 摇色子(猜测) {
    return new Promise((resolve, reject) => {
        let sino = parseInt(Math.random() * 6 + 1)
        if (sino > 3) {
            if (猜测 === ‘大‘) {
                resolve(sino)
            } else {
                reject(sino)
            }
        } else {
            if (猜测 === ‘大‘) {
                reject(sino)
            } else {
                resolve(sino)
            }
        }
        setTimeout(() => {
            resolve(sino)
        }, 300)
    })
}
async function test() {
    try {
        //把await及获取它的值的操作放在try里
        let n = await 摇色子(‘大‘)
        console.log(‘赢了‘ + n)
    } catch (error) {
        //失败的操作放在catch里
        console.log(‘输了‘ + error)
    }
}

test()
// 输出: 输了2

*/

// 案例4:
/*

function fn() {
    return new Promise(resolve => {
        console.log(1)
    })
}
async function f1() {
    await fn()  // 必须拿到resolve的值
    console.log(2)
}

f1()
console.log(3)
    // 这个代码因为fn是属于同步的,所以先打印出1,然后是3,但是因为没有resolve结果,所以await拿不到值,因此不会打印2
    //1
    //3
*/

// 案例5:
function fn() {
    return new Promise(resolve => {
        console.log(1)
        resolve(‘哈哈‘)
    })
}
async function f1() {
    let msg = await fn() // await表示异步,所以会优先执行console.log(3)
    console.log(2)
    console.log(msg)
}

f1()
console.log(3)
    // 这个代码与前面相比多了个resolve说明promise成功了,所以await能拿到结果,因此就是1 3 2
    // 1
    // 3
    // 2
    // 哈哈

以上是关于demo_09 async&await的主要内容,如果未能解决你的问题,请参考以下文章

在 Vuejs 中使用 async-await 等待函数内部的赋值

记录一个std::future和std::async的demo

如何使用Async&Await将同步代码转换为异步编程

async&await的前世今生

协程与任务

协程与任务