快捷導(dǎo)航

詳解JavaScript中Promise類的使用方法

更新時間：2023年05月07日 14:01:49 作者：會說法語的豬

這篇文章主要為大家詳細(xì)介紹了JavaScript中Promise類的使用方法，文中的示例代碼簡潔易懂，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下

這篇主要講一下Promise的類方法的基本使用，至于Promise的基本使用這里就不贅述了，之前也有手寫過Promise、實現(xiàn)了Promise的核心邏輯。其實我們平時用Promise也挺多的，不過又出現(xiàn)了兩個新的語法（ES11，ES12新增了兩個），所以這篇就簡單說一下，也挺簡單

1. all

Promise.all方法我們可以傳入一個數(shù)組參數(shù)，數(shù)組中可以放多個Promise，它會等所有的Promise的狀態(tài)都為fulfilled時，來獲取最終的結(jié)果，它會把所有每個Promise resolve的結(jié)果，放在一個數(shù)組中，且結(jié)果的順序和我們傳入的數(shù)組參數(shù)中的Promise保持一直（跟時間無關(guān)）

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => {
  const obj = { data: '22222' }
  setTimeout(() => {
    resolve(obj)
  }, 2000)
})
 
const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})
 
Promise.all([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

上面代碼會在3s后在then方法中拿到最終的結(jié)果如下：

但是all方法是有個缺陷的，當(dāng)有其中一個Promise變成rejected狀態(tài)時，新Promise就會立即變成對應(yīng)的reject狀態(tài)，也就是只能在catch中捕獲到錯誤，其他fulfilled狀態(tài)的值我們是拿不到的。因此有了allSettled方法

2. allSettled

allSettled是在ES11（2020）中添加的新的API，Promise.allSettled

該方法會在所有的Promise都有結(jié)果時（無論是fulfilled，還是rejected）都會在then方法中拿到我們的最終的結(jié)果：

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject(obj)
  }, 2000)
})
 
const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})
 
Promise.allSettled([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

我們傳入了三個Promise，在2s的時候我們的p2就reject拒絕了，但是我們同樣可以拿到結(jié)果，但是這個result結(jié)果數(shù)組結(jié)構(gòu)有點(diǎn)兒變化，我們看下打印結(jié)果：

我們可以看到allSettled的結(jié)果是一個數(shù)組，數(shù)組中存放著每一個Promise的結(jié)果，并且是對應(yīng)一個對象的；這個對象中包含status狀態(tài)，以及對應(yīng)的value值

3. race

race是競技、賽跑的意思，也就是誰先有結(jié)果我就要誰，這個result拿到的結(jié)果就不是一個數(shù)組了，而是最快的一個Promise resolve出來的結(jié)果

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    resolve(obj)
  }, 2000)
})
 
const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})
 
Promise.race([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

看下控制臺的打?。?nbsp;

因為p3用時最短，最快，所以result拿到的就是p3resolve出的結(jié)果值，但是如果最快的那個reject了呢我們看一下：

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject('出錯了~~~')
  }, 500)
})
 
const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})
 
Promise.race([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

我們修改一下代碼，將p2時間設(shè)置為0.5s，且是rejected的狀態(tài)，我們再看下打印結(jié)果：

直接就會被catch捕獲了，這樣看來，如果最快的那個狀態(tài)為rejected狀態(tài)的話，那我們后面的resolve的狀態(tài)也拿不到值了。如果我們想拿到最快的fulfilled狀態(tài)的值，也就是如果前面有reject的，我們就忽略掉，接著等待下一個resolve的，怎么做呢，這就有了any方法

4. any

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject('出錯了~~~')
  }, 500)
})
 
const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})
 
Promise.any([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

還是上一次的代碼，我們把方法改為any，再看一下打印結(jié)果：

我們在1s后就會拿到p3 resolve的結(jié)果，那個p2 reject的就忽略掉了，那如果我們所有的Promise都是rejected狀態(tài)時它會怎么做呢？我們看一下：

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('出錯了111~~~')
  }, 3000)
})
 
const p2 = new Promise((resolve, reject) => { 
  setTimeout(() => {
    reject('出錯了222~~~')
  }, 500)
})
 
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('出錯了333~~~')
  }, 1000)
})
 
Promise.any([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err, err.errors)
})

我們看下打印結(jié)果：