快捷導(dǎo)航

詳解JavaScript中Promise類(lèi)的使用方法

更新時(shí)間：2023年05月07日 14:01:49 作者：會(huì)說(shuō)法語(yǔ)的豬

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

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

1. all

Promise.all方法我們可以傳入一個(gè)數(shù)組參數(shù)，數(shù)組中可以放多個(gè)Promise，它會(huì)等所有的Promise的狀態(tài)都為fulfilled時(shí)，來(lái)獲取最終的結(jié)果，它會(huì)把所有每個(gè)Promise resolve的結(jié)果，放在一個(gè)數(shù)組中，且結(jié)果的順序和我們傳入的數(shù)組參數(shù)中的Promise保持一直（跟時(shí)間無(wú)關(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)
})

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

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

2. allSettled

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

該方法會(huì)在所有的Promise都有結(jié)果時(shí)（無(wú)論是fulfilled，還是rejected）都會(huì)在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)
})

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

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

3. race

race是競(jìng)技、賽跑的意思，也就是誰(shuí)先有結(jié)果我就要誰(shuí)，這個(gè)result拿到的結(jié)果就不是一個(gè)數(shù)組了，而是最快的一個(gè)Promise resolve出來(lái)的結(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)
})

看下控制臺(tái)的打印：

因?yàn)閜3用時(shí)最短，最快，所以result拿到的就是p3resolve出的結(jié)果值，但是如果最快的那個(gè)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('出錯(cuò)了~~~')
  }, 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í)間設(shè)置為0.5s，且是rejected的狀態(tài)，我們?cè)倏聪麓蛴〗Y(jié)果：

直接就會(huì)被catch捕獲了，這樣看來(lái)，如果最快的那個(gè)狀態(tài)為rejected狀態(tài)的話(huà)，那我們后面的resolve的狀態(tài)也拿不到值了。如果我們想拿到最快的fulfilled狀態(tài)的值，也就是如果前面有reject的，我們就忽略掉，接著等待下一個(gè)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('出錯(cuò)了~~~')
  }, 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é)果：

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

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

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