Promise,async和await的理解笔记

// ------------------------------------------------------------Promise------------------------------------------------------------
function f1 () {
    return new Promise((resolve, reject) => {
        
        setTimeout(() => {
            console.log("我是老大:我执行完了.你们后面继续吧.");
            resolve()
        }, 2000);
    })
}

function fx () {
    setTimeout(() => {
        console.log("我是普通程序:但我也比较耗时.你会等我执行完了再执行么?");
    }, 2000);
}

function f2 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("我是老二:当然会了,因为链式调用会阻塞程序啊.我可是等你执行完了再执行的.");
            resolve()
        }, 2000);
    })
}

function f3 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("我是老三:但我想提前结束程序了,不让老四执行,可以么?");
            reject("老三提前终结!")
        }, 2000);
    })
}

function f4 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("我是老四:总有刁民想害朕,你以为你能得逞么?");
            resolve()
        }, 2000);
    })
}

f1().then(fx)
    .then(f2)
    .then(f3)
    .then(f4)
    .catch(e => {
        console.log("报错了啊", e)
    })

PS:根据上述代码执行情况:

new Promise()的链式调用中.(Promise会阻塞执行,但普通方法是不会的.fx是和f2同时打印的执行结果.说明fx只是启动了定时器,但是并没有等待定时器执行完毕就去执行了f2)

1.如果是普通方法,你执行完了代码.就会进入到下一个then中,但并不会阻塞等待.

2.如果你也是Promise,则只有你调用resolve,或者reject,才会进入到下一个then中.

在链式调用中,任何节点都可以提前reject.直接跳到结束.

 

// ------------------------------------------------------------async && await------------------------------------------------------------
function needTime () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("我比较耗时,所以...你等我了么?");
            resolve()
        }, 2000);
    })
}

function test1(){
    needTime()
    console.log("我会等你么?");
}

async function test2 () {
    await needTime()
    console.log("我会等你么?");
}

console.log("第一次测试");
test1()



console.log("第二次测试");
test2()

在这个例子中,没有加async的方法会先打印,根本不会阻塞等待needTime的执行.
但是有async的方法会阻塞等待needTime执行完毕后,才会打印.