JavaScript promise的使用和原理分析

更新時間：2023年04月12日 09:59:34 作者：肥肥呀呀呀

Promise 是一個 ECMAScript 6 提供的類，目的是更加優(yōu)雅地書寫復雜的異步任務。由于 Promise 是 ES6 新增加的，所以一些舊的瀏覽器并不支持，蘋果的 Safari 10 和 Windows 的 Edge 14 版本以上瀏覽器才開始支持 ES6 特性

一、為什么一個promise可以調用多個.then方法

如下面的：

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})
// 1.同一個Promise可以被多次調用then方法
// 當我們的resolve方法被回調時, 所有的then方法傳入的回調函數(shù)都會被調用
promise.then(res => {
  console.log("res1:", res)    //hahaha
})
promise.then(res => {
  console.log("res2:", res)    //hahaha
})
promise.then(res => {
  console.log("res3:", res)    //hahaha
})

答案：

then內回調不返回任何值，默認返回當前Promise
then內回調返回Promise
then內回調返回普通值(數(shù)值/字符串/普通對象/undefined)，普通的值被作為一個新的Promise的resolve值

二、什么是Promise.resolve()

Promise.resolve() 表示狀態(tài)為fulfilled的promise對象

Promise.resolve()
// 等同于
new Promise((resolve)=>{resolve()})

為什么會有下面的執(zhí)行結果？感覺十分異常

Promise.resolve().then(() => {
  console.log(0);
  return Promise.resolve(4)
}).then(res => {
  console.log(res)
})
Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() =>{
  console.log(6);
})
// 0,1,2,3,4,5,6

(
  async function() {
    return Promise.resolve()
  }
)().then(()=>{
  console.log(1)
})
new Promise((resolve) => {
  resolve()
}).then(()=>{
  console.log(2)
}).then(()=>{
  console.log(3)
})
/// 2 3 1

答案：

如果promise內返回的對象具有可調用的then方法，則會在微任務隊列中再插入一個任務NewPromiseResolveThenableJob，這就慢了一拍；這個任務會執(zhí)行這個then方法，如果這個then方法是來自于promise的，則因為是異步的又慢了一拍，所以一共慢了兩拍。

參考

三、Promise.all缺陷和Promise.allSettled

Promise.all() 的缺陷

其中任意一個 promise 被 reject ，Promise.all 就會立即被 reject ，不在執(zhí)行then。

數(shù)組中其它未執(zhí)行完的 promise 依然是在執(zhí)行的，但是Promise.all 沒有返回它們的結果，同時Promise.all 沒有采取任何措施來取消它們的執(zhí)行。

Promise.allSettled()

Promise.allSettled() 可以獲取數(shù)組中每個 promise 的結果，無論成功或失敗

只有then方法所有結果都會在then中體現(xiàn)

注意

彼此相互依賴，一個失敗全部失效(全無或全有)用 Promise.all ;相互獨立，獲取每個結果用 Promise.allSettled

四、Promise.race() 使用

多個promise執(zhí)行，最快的執(zhí)行Promise.race()的then或者catch

里面的promise依舊會執(zhí)行

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
      console.log(0)
  }, 1000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(2)
    resolve('Promise 2 resolved');
  }, 2000);
});
Promise.race([promise1, promise2]).then(result => {
  console.log(result); // "Promise 1 resolved"
});
// 0
//Promise 1 resolved
//2

到此這篇關于JavaScript promise的使用和原理分析的文章就介紹到這了,更多相關JS promise內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: