摘要：常見問題總結如何中斷的缺點之一就是無法讓中斷如上代碼如何讓的鏈式調用中斷一種方法是在中直接拋錯這樣就不會執行直接跳到方法打印但此方法并沒有實際中斷另一種方法就是在中一個新的但不改變其狀態這樣該就一直處于狀態即不會執行后面任何方法中斷有啥用

promise的缺點之一就是無法讓promise中斷

Promise.resolve().then(() => {
    console.log("then 1")
}).then(() => {
    console.log("then 2")
}).then(() => {
    console.log("then 3")
}).catch((err) => {
    console.log(err)
})

如上代碼如何讓promise的鏈式調用中斷?

一種方法是在then 1中直接拋錯, 這樣就不會執行then 2, then 3, 直接跳到catch方法打印err(但此方法并沒有實際中斷)

Promise.resolve().then(() => {
    console.log("then 1")
    throw new Error("xxx")
}).then(() => {
    console.log("then 2")
}).then(() => {
    console.log("then 3")
}).catch((err) => {
    console.log(err)
})

另一種方法就是在then 1中return 一個新的Promise,但不改變其狀態,這樣該Promise就一直處于pedding狀態,即不會執行后面任何方法

Promise.resolve().then(() => {
    console.log("then 1")
    return new Promise(() => {})
}).then(() => {
    console.log("then 2")
}).then(() => {
    console.log("then 3")
}).catch((err) => {
    console.log(err)
})

中斷有啥用? ---------- 可以讓我想到超時中斷問題

假設我們要用promsie自己封裝一個ajax, 設置超時中斷時間,如果沒返回就不用返回了, 返回也不做處理了,不重要(雖然和上面的原理沒關系,但不重要,上面是一個promsie的鏈式調用中斷,此例是實際應用中的問題,你管我用幾個promsie呢, 想到了記錄一下)

function wrap(p1) {
    let abort
    let p2 = new Promise((resolve, reject) => {
        abort = reject
    })
    let p = Promise.race([p1, p2])
    // 將延時promise的reject方法掛在到p1與p2的race后的promise上, 可以在方法外通過調用p的cancel方法,來觸發p2的reject
    p.cancel = abort
    return p
}

let fn = wrap(new Promise((resolve, reject) => {
    // 假設1秒后ajax返回, 調用resolve
    setTimeout(() => {
        resolve()
    }, 1000)
}))

fn.then(() => {
    console.log("ok")
}).catch(() => {
    console.log("err")
})

// 設置延時時間500ms, 如果500ms數據買回來,就中斷
setTimeout(() => {
    fn.cancel()
}, 500)

之前的promise中斷好歹還可以強說有點用,下面這種例子,誰要是沒事寫在生產代碼中,直接開除好吧~~~尋思尋思得了

const p = Promise.resolve();
;(()=>{
    const implicit_promise = new Promise(resolve =>{
        const promise = new Promise(resolve=>{
            resolve(p)
        }); 
        promise.then(()=>{ 
            console.log("after:await");
            resolve()
        })
    });
    return implicit_promise
})();
p.then(()=>{
    console.log("tick:a");
}).then(()=>{
    console.log("tick:b");
}).then(()=>{
    console.log("tick:c");
});

首先第一行生成一個resolve成功態的promise,然后自執行函數同步代碼直接執行,
第5行resolve(p), 這里要知道resolve一個promsie要等到該promise執行then方法后才能拿到返回值
也就是說第7行的then要等到p的返回值拿到之后才執行
下面先把下面的鏈式編程拆一下

const p = Promise.resolve();
;(()=>{
    const implicit_promise = new Promise(resolve =>{
        const promise = new Promise(resolve=>{
            resolve(p)
        });
        promise.then(()=>{ 
            console.log("after:await");
            resolve()
        })
    });
    return implicit_promise
})();
let p1 = p.then(()=>{
    console.log("tick:a");
})
p1.then(()=>{
    console.log("tick:b");
}).then(()=>{
    console.log("tick:c");
});

自執行函數執行完,執行p1的回調先打印tick:a,且由于沒有return值,所以默認return一個新的promise也就是p1接收的心promise
然后緊接著p1調用then方法,之后第7行也調用then方法, 所以相繼打印tick:b和after:await
等到tick:b執行完返回一個新的promise,這才執行tick:c
所以打印順序為 tick:a ==> tick:b ==> after:await ==> tick:c
這就是面向面試學習的精髓

async function async1(){
    console.log("async1 start")
    await async2();
    console.log("async1 end")
}
async function async2(){
    console.log("async2")
}
console.log("script start")
setTimeout(function(){
    console.log("setTimeout") 
},0)  
async1();
new Promise(function(resolve){
    console.log("promise1")
    resolve();
}).then(function(){
    console.log("promise2")
})
console.log("script end");

這段代碼在很多地方看到了,其他執行順序很容易理解,唯一的問題就在于async1 end什么時候執行,我們先不考慮這行console
就很容易可以得到以下結果

// script start (同步代碼,上面是兩個函數還沒有調用)
// async1 start (調用async1的時候執行async1函數,打印async1 start)
// async2 (在async1中調用async2, 打印async2)
// promsie1 (同步代碼執行到new Promise, 在executor中執行同步代碼, 打印promise1)
// script end (promise1 打印后暫不執行promsie2因為then回調是在微任務中,先執行同步代碼, 打印script end)
// promise2 (同步代碼執行完, 清空微任務)
// setTimeout (宏任務執行)

那么問題就在于async1 end什么時候執行

毫無疑問現在的問題在于await的原理,他肯定也是異步的微任務, 問題在于async1 end和promise2 誰先執行,
首先在node環境下測試是promise2先執行,但是在chrome中執行是async1 end先執行
由此可以得出await轉化promise
在node中

async2().then(() => {
    console.log("async1 end")
})
// 你以為是這么轉化的?我也是這么以為的,**但是**在node中的then函數中它默認用Promise又包裹一層所以是這樣的
async2().then(() => {
    return Promise.resolve().then(() => {
        console.log("async1 end")
    })
})
// 有點惡心了~~~我測試的版本是v8.6.0以上版本
// 這樣的執行順序就是async1 end 在promise2之后
// script start
// async1 start
// async2
// promise1
// script end
// promise2
// async1 end
// setTimeout

但在chrome(74.0.3729.169)中的轉化應該是只有一個then,then中直接調用console,所以在瀏覽器中就是

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

這個轉化過程是通過結果推出來的,總之開發環境還是要避免這樣的代碼出現