快捷導(dǎo)航

JavaScript promise的使用和原理分析

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

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

一、為什么一個(gè)promise可以調(diào)用多個(gè).then方法

如下面的：

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})
// 1.同一個(gè)Promise可以被多次調(diào)用then方法
// 當(dāng)我們的resolve方法被回調(diào)時(shí), 所有的then方法傳入的回調(diào)函數(shù)都會(huì)被調(diào)用
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內(nèi)回調(diào) 不返回任何值，默認(rèn)返回當(dāng)前Promise
then內(nèi)回調(diào) 返回Promise
then內(nèi)回調(diào) 返回普通值(數(shù)值/字符串/普通對(duì)象/undefined)，普通的值被作為一個(gè)新的Promise的resolve值

二、什么是Promise.resolve()

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

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

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

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內(nèi)返回的對(duì)象具有可調(diào)用的then方法，則會(huì)在微任務(wù)隊(duì)列中再插入一個(gè)任務(wù)NewPromiseResolveThenableJob，這就慢了一拍；這個(gè)任務(wù)會(huì)執(zhí)行這個(gè)then方法，如果這個(gè)then方法是來自于promise的，則因?yàn)槭钱惒降挠致艘慌模砸还猜藘膳摹?/p>

參考

三、Promise.all缺陷和Promise.allSettled

Promise.all() 的缺陷

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

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

Promise.allSettled()

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

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

注意

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

四、Promise.race() 使用

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

里面的promise依舊會(huì)執(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

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

您可能感興趣的文章: