JavaScript?promise的使用方法和原理是什么

這篇“JavaScript promise的使用方法和原理是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript promise的使用方法和原理是什么”文章吧。

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

如下面的：

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})
// 1.同一個Promise可以被多次調用then方法
// 當我們的resolve方法被回調時, 所有的then方法傳入的回調函數都會被調用
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內回調 返回 普通值(數值/字符串/普通對象/undefined)，普通的值被作為一個新的Promise的resolve值

二、什么是Promise.resolve()

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

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

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

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，這就慢了一拍；這個任務會執行這個then方法，如果這個then方法是來自于promise的，則因為是異步的又慢了一拍，所以一共慢了兩拍。

參考

三、Promise.all缺陷和Promise.allSettled

Promise.all() 的缺陷

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

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

Promise.allSettled()

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

只有then方法 所有結果都會在then中體現

注意

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

四、Promise.race() 使用

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

里面的promise依舊會執行

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的使用方法和原理是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。