ES6中的Promise

Promise,翻譯為承諾,是異步變成的一種解決方案,比傳統(tǒng)的回調(diào)函數(shù)更加合理和更加強(qiáng)大
以往:

doSomething((result)=>{
    doSomethingElse(result,(newResult)=>{
        doThirdThing(NewReslt,(finalResult)=>{
              console.log("得到最終結(jié)果:" + finalResult)
        }, failureCallback)
   }, failureCallback)
}, failureCallback)

通過Promise改寫

doSomething().then((result)=>{
      return doSomethingElse(result)
})
.then((newReslut)=>{
      return doThirdThing(newResult)
})
.then((finalResult)=>{
    console.log("得到最終結(jié)果:" + finalResult)
})
.catch(failureCallback)

感受到promise解決異步操作的優(yōu)點(diǎn):

  • 鏈?zhǔn)讲僮鳒p低了編碼難度
  • 代碼可讀性明顯增強(qiáng)

狀態(tài)

promise對(duì)象僅有三種狀態(tài)

  • pending(進(jìn)行中)
  • fulfilled(已成功)
  • rejected(已失敗)

特點(diǎn)

  • 對(duì)象的狀態(tài)不受外界影響,只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài)
  • 一旦狀態(tài)改變(從pending變?yōu)?code>fulfilled和從pending變?yōu)?code>rejected),就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果

用法

all()

Promise.all() 方法用于將多個(gè)Promise實(shí)例,包裝成一個(gè)新的Promise實(shí)例

const p = Promise.all([p1,p2,p3])

接受一個(gè)數(shù)組作為參數(shù),數(shù)組成員都應(yīng)為Promise實(shí)例
實(shí)例p的狀態(tài)由p1,p2,p3決定,分為兩種

  • 只有p1,p2,p3的狀態(tài)都變成fulfilled,p的狀態(tài)才會(huì)變成fulfilled,此時(shí)p1,p2,p3的返回值組成一個(gè)數(shù)組,傳給p的回調(diào)函數(shù)
  • 只有p1,p2,p3當(dāng)中有一個(gè)被rejected,p的狀態(tài)就會(huì)變成rejected,此時(shí)一個(gè)被rejected的實(shí)例的返回值,會(huì)傳給p的回調(diào)函數(shù)

注意,如果作為參數(shù)的Promise實(shí)例,自己定義了catch方法,那么它被rejected,并不會(huì)觸發(fā)Promise.all()catch方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('報(bào)錯(cuò)了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報(bào)錯(cuò)了]

如果p2沒有自己的catch方法,就會(huì)調(diào)用Promise.all()catch方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('報(bào)錯(cuò)了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 報(bào)錯(cuò)了

race()

Promise.race()方法同樣是將多個(gè)Promise實(shí)例,包裝成一個(gè)新的Promise實(shí)例

const p = Promise.race([p1,p2,p3])

只要p1,p2,p3之中有一個(gè)實(shí)例率先改變狀態(tài),p的狀態(tài)就跟著改變,率先改變的Promise實(shí)例的返回值則傳遞給p的回調(diào)函數(shù)

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

allSettled()

Promise.allSettled()方法接受一組Promise實(shí)例作為參數(shù),包裝成一個(gè)新的Promise實(shí)例,只有等到所有的這些參數(shù)實(shí)例都返回結(jié)果,不管是fulfilled還是rejected,包裝實(shí)例才會(huì)結(jié)束

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 簡介 ES6中除了上篇文章講過的語法新特性和一些新的API之外,還有兩個(gè)非常重要的新特性就是Promise和Gen...
    flydean程序那些事閱讀 1,410評(píng)論 0 2
  • 1.概念: Promise是一種異步操作,分為三種狀態(tài):pending(進(jìn)行中),resolved(已完成),re...
    李丹linda閱讀 284評(píng)論 0 0
  • 什么是Promise對(duì)象? Promise是異步編程的一種解決方案,比起傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件),它顯得更...
    Gopal閱讀 3,280評(píng)論 0 3
  • Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更...
    硅谷干貨閱讀 273評(píng)論 0 0
  • 什么叫promise? Promise對(duì)象可以理解為一次執(zhí)行的異步操作,使用promise對(duì)象之后可以使用一種鏈?zhǔn)?..
    98b8dc01512b閱讀 317評(píng)論 0 0