promise常見問題總結

promise常見問題總結

promise如何中斷

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)