Promise掃盲

漓漾li發表於2019-04-25
Promise

then

then函式可以return另一個promise：

const p1 = new Promise((resolve, reject) =>{
    resolve('p1')
})
const p2 = new Promise((resolve, reject) =>{
  setTimeout(() =>{
    resolve('p2')
  },3000)
})
p1.then(res => {
  console.log(res)
    return p2
}).then(res =>{  
    // p2 resolve後才執行
    console.log(res)
})
//p1
// 3s後輸出...
// p2
複製程式碼

那麼這個p2就會代替當前p1的狀態，等到新的p2的狀態修改時，下一個then才會執行

catch

1. 作用

可以捕獲到promise程式執行中的error，等同於 .then(null, rejection) 或 .then(undefined, rejection)

2. 可以獲取到的錯誤

  • promise函式體中丟擲的error。在promise resolve後，再丟擲錯誤，不會被捕獲
    const p1 = new Promise((resolve,reject) => {throw new Error('error')})
p1.catch(error => console.log(error))   // Error: error
複製程式碼
  • promise的reject操作
    const p2 = new Promise((resolve,reject) => reject('rejected'))
p2.catch(error => console.log(error))  // rejected
複製程式碼
  • then 函式體中丟擲的error
    const p3 = new Promise((resolve,reject) => resolve('resolved'))
p3.then(res =>{
    throw new Error('error')
}).catch(error => console.log(error))  // Error: error
複製程式碼
  • then函式可以返回一個promise(如果沒有定義catch方法)，如果這個promise函式體中有reject或者error，也可以捕獲到

3. 推薦使用catch方式捕獲錯誤，而不是then的第二個引數：

因為catch可以捕獲到它前面所有then方法中的錯誤

finally

  • 不管promise最後狀態如何，都會執行的操作
  • 沒有引數，獲取不到當前promise最後的狀態

Promise.all

1. 引數

  • 引數不僅僅可以是陣列，具有Iterator介面的物件都可以。
  • 陣列引數的每一個元素為promise例項，如果不是，就會呼叫Promise.resolve轉換為Promise例項
    const obj = {
   [Symbol.iterator]() {
       let index = 0
       return {
           next() {
               return {
                   // promise物件 和 其他型別都可以
                   value: new Promise(resolve => resolve(index++)), done: index > 2
                   // value: index++, done: index > 2
               }
           }
       }
   }
}
const p = Promise.all(obj)
p.then(res => {
   console.log(res)  // [0, 1]
})  
複製程式碼

2. 狀態

const p = Promise.all([p1, p2, p3]);
複製程式碼

p的狀態由p1、p2、p3決定，分成兩種情況：

  • 只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個陣列，傳遞給p的回撥函式。
  • 只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。

3. catch

如果引數中的promise定義了catch方法，那麼Promise.all()的catch就不會捕獲到錯誤

Promise.race

  • 只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。
  • 引數、catch規則同Promise.all

Promise.resolve

將現有物件轉為Promise物件。

1. 引數

  • 引數為promise例項：原封不動的返回這個例項。
  • 引數為thenable物件：將它轉為promise物件，然後立即執行它的then方法
  • 引數不是thenable物件，或者是一個原始值：返回一個新的promise物件，狀態為resolved
  • 沒有引數：直接返回衣蛾resolved狀態的promise物件

Promise.reject

返回一個狀態為rejected的promise例項

Promise.reject()方法的引數，會原封不動地作為reject的理由，變成後續方法的引數

const thenable = {
  then(resolve, reject) {
    reject('error');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true  e並不是'error'
複製程式碼

相關文章