掌握 Promise 的邏輯方法

來源 | https://www.cnblogs.com/xyzhanjiang/archive/2020/12/05/14090357.html

Promise 是 ES2015 新增的對象

Promise 對象有幾個(gè)組合方法，可以將多個(gè)承諾合并成一個(gè)進(jìn)行處理

分別是 Promise.all, Promise.race, Promise.allSettled, Promise.any

這些方法都可以接收一組承諾，返回一個(gè)新的承諾

Promise.all(values)

其中參數(shù) values 是一個(gè)可迭代對象，比如數(shù)組

在后文中使用詞語“成功”表示承諾 resolve，“失敗”表示承諾 reject

Promise.all

Promise.all 方法返回的承諾會等到參數(shù)中所有的承諾都成功之后才會成功，只要其中有一個(gè)失敗了則返回的承諾也會立即失敗，不會等到那些還掛起的承諾有結(jié)果

Promise.all 方法可以用來處理那些缺一不可的邏輯

示例：同時(shí)發(fā)出多個(gè)請求都成功后才能進(jìn)行下一步

const coffee = fetch('/coffee')const tea = fetch('/tea')const me = fetch('/me')
// 我全都要const res = await Promise.all([coffee, tea, me])

Promise.race

Promise.race 方法返回參數(shù)中最快的那個(gè)承諾，如果最快的那個(gè)承諾成功則返回的承諾也會成功，否則就是失敗，不會等到那些還掛起的承諾有結(jié)果

示例：給一個(gè)復(fù)雜任務(wù)設(shè)定一個(gè)超時(shí)時(shí)間

// 設(shè)置一個(gè)定時(shí)器，時(shí)間到了就 reject 一個(gè)承諾const timeout = new Promise((resolve, reject) => {  setTimeout(reject, 3000)})
const missions = fetch('/missions')
try {  const res = await Promise.race([timeout, missions])  // missions 任務(wù)成功} catch () {  // 時(shí)間超過 3 秒了或者任務(wù)失敗了}

Promise.allSettled

Promise.allSettled 方法返回的承諾對象會等到參數(shù)中所有的承諾對象都完成后才成功，無論怎樣該方法返回的承諾都不會失敗

和 Promise.all 方法的區(qū)別

Promise.all 方法需要參數(shù)中的所有承諾都成功

而 Promise.allSettled 對參數(shù)中的承諾是成功還是失敗并不關(guān)心，只要有結(jié)果就行

示例：一次性上傳多個(gè)文件，其中上傳成功和上傳失敗的互不影響，在一輪上傳任務(wù)完成之后，可以篩選出那些上傳失敗的重新上傳。

const upload = file => {  const formData = new FormData()  formData.append('file', file)  return fetch('/upload', {    method: 'POST',    body: formData  })}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {  if (!e.target.value) return  const files = e.target.files  const promises = files.map(file => upload(file))
  const res = await Promise.allSettled(promises)  // 全部上傳任務(wù)都完成了，找出上傳失敗的重新上傳})

該方法是 ES2020 新添加的方法

Promise.any

Promise.any 方法返回一組承諾中最快成功的那個(gè)承諾，如果參數(shù)中所有承諾都失敗了，那么返回的承諾也失敗

和 Promise.race 方法的區(qū)別

Promise.race 返回參數(shù)中最快的那個(gè)承諾，無論它是成功還是失敗

而 Promise.any 關(guān)注的是參數(shù)中最快同時(shí)還必須成功的那個(gè)承諾

和 Promise.all 方法的區(qū)別

Promise.any 和 Promise.all 是完全相反的

Promise.any 參數(shù)中全部承諾都失敗了才會失敗，Promise.all 參數(shù)中全部承諾都成功了才會成功

Promise.any 參數(shù)中一旦有一個(gè)承諾成功了返回的新承諾就會成功，Promise.all 參數(shù)中一旦有一個(gè)承諾失敗了返回的新承諾就會失敗

示例：同時(shí)加載一組圖片，但是我們只需要用到其中的一張，就可以用 Promise.any 方法挑選出最先加載成功的那張圖片

const fetchImg = async (url) => {  return fetch(url).then(res => {    if (!res.ok) {      throw new Error('HTTP error!')    } else {      return res.blob()    }  })}
cosnt img1 = fetchImg('/1.png')const img2 = fetchImg('/2.png')
try {  const res = await Promise.any([img1, img2])  const url = URL.createObjectURL(res)  const img = document.createElement('img')  img.src = url  document.body.appendChild(img)} catch () {  // 一個(gè)都沒加載成功 QAQ}

該方法還處于草案中，目前最新的 Chrome, Firefox, Safari 支持。

本文完~