Stories

Detail Return Return

面試官:講一下如何終止一個 Promise 繼續執行 - Stories Detail

我們知道 Promise 一旦實例化之後,狀態就只能由 Pending 轉變為 Rejected 或者 Fulfilled, 本身是不可以取消已經實例化之後的 Promise 了。

但是我們可以通過一些其他的手段來實現終止  Promise 的繼續執行來模擬  Promise 取消的效果。

Promise.race

我們都知道 Promise.race 方法接收多個 Promise ,一旦這些 Promise中任意一個 Promise 存在 resove 或者 reject 其他的 Promise 就不會執行了,基於這個特點,我們可以構造代碼實現終止 Promise 的執行

image.png

image.png

從上面的輸出可以看到此時第二個 promise resolve 的結果並沒有輸出,因此使用 Promise.race 還是可以達到終止一個 Promise 繼續執行的目的。

Promise.race 只要有一個 promise 的狀態發生了變化,不管是 resolve 還是 reject 都會忽略掉其他的 promise 的 resolve 還是 reject, 因此這也是上面控制枱沒有輸出 第二個 promise 中 resolve 的值,但是卻輸出了 第二個 promise 中的 console.log

AbortController

通過 abortController.abort() 的方式實現終止Promise的執行

image.png

封裝一個新的 promise 去終止另一個 promise

image.png

測試代碼:

image.png
執行結果:

image.png

  • 整個過程是聲明一個新的 promise ,然後模擬的 異步操作 是 1000 ms 的時候resolve("hello") 這個新的 promise。
  • 但是我們在 500ms 的時候調用了取消函數, 並將這個新的 promise 直接 reject 掉了。導致 run 函數返回的 這個新的 promise 提前完成了狀態切換,由 pending -> reject。
  • 由於這個新的 promise 狀態提前結束了, 所以我們一開始傳遞的 promise(async 是 promise 的語法糖,內部也是一個 promise)就不會再執行了,因此達到一個終止的效果

第三方包 Bluebird[1]

Bluebird作為一個基於 Promises/A+ 標準的社區的第三方庫 Promise 庫 , 比 async 還早出現,提供了很多原生標準沒有的一些方法功能,例如這裏的 cancel 取消promise 的功能,更多的細節或其他功能可以參考官網。

以下是 cancel promise 的代碼示例:

image.png

小結

相信通過上面的介紹,你已經掌握了使用 如何在面試中回答終止一個 promise 這個面試題的的精髓了。

如果這篇文章對你有幫助,歡迎點贊、關注➕、轉發 ✔ !

user avatar tianmiaogongzuoshi_5ca47d59bef41 Avatar toopoo Avatar dingtongya Avatar nihaojob Avatar kobe_fans_zxc Avatar longlong688 Avatar huajianketang Avatar Dream-new Avatar solvep Avatar febobo Avatar woniuseo Avatar nqbefgvs Avatar
Favorites 161 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.