掌握 Promise 的逻辑方法

更新日期: 2020-12-01阅读: 1.2k标签: Promise

Promise 是 ES2015 新增的对象

Promise 对象有几个组合方法,可以将多个承诺合并成一个进行处理

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

这些方法都可以接收一组承诺,返回一个新的承诺

Promise.all(values)

其中参数 values 是一个可迭代对象,比如数组

在后文中使用词语“成功”表示承诺 resolve,“失败”表示承诺 reject


Promise.all

Promise.all 方法返回的承诺会等到参数中所有的承诺都成功之后才会成功,只要其中有一个失败了则返回的承诺也会立即失败,不会等到那些还挂起的承诺有结果


Promise.all 方法可以用来处理那些缺一不可的逻辑

示例:同时发出多个请求都成功后才能进行下一步

const coffee = fetch('/coffee')
const tea = fetch('/tea')
const me = fetch('/me')

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


Promise.race

Promise.race 方法返回参数中最快的那个承诺,如果最快的那个承诺成功则返回的承诺也会成功,否则就是失败,不会等到那些还挂起的承诺有结果


示例:给一个复杂任务设定一个超时时间

// 设置一个定时器,时间到了就 reject 一个承诺
const timeout = new Promise((resolve, reject) => {
  setTimeout(reject, 3000)
})

const missions = fetch('/missions')

try {
  const res = await Promise.race([timeout, missions])
  // missions 任务成功
} catch () {
  // 时间超过 3 秒了或者任务失败了
}


Promise.allSettled

Promise.allSettled 方法返回的承诺对象会等到参数中所有的承诺对象都完成后才成功,无论怎样该方法返回的承诺都不会失败



和 Promise.all 方法的区别

Promise.all 方法需要参数中的所有承诺都成功

而 Promise.allSettled 对参数中的承诺是成功还是失败并不关心,只要有结果就行

示例:一次性上传多个文件,其中上传成功和上传失败的互不影响,在一轮上传任务完成之后,可以筛选出那些上传失败的重新上传

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)
  // 全部上传任务都完成了,找出上传失败的重新上传
})

该方法是 ES2020 新添加的方法


Promise.any

Promise.any 方法返回一组承诺中最快成功的那个承诺,如果参数中所有承诺都失败了,那么返回的承诺也失败


和 Promise.race 方法的区别

Promise.race 返回参数中最快的那个承诺,无论它是成功还是失败

而 Promise.any 关注的是参数中最快同时还必须成功的那个承诺

和 Promise.all 方法的区别

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

Promise.any 参数中全部承诺都失败了才会失败,Promise.all 参数中全部承诺都成功了才会成功

Promise.any 参数中一旦有一个承诺成功了返回的新承诺就会成功,Promise.all 参数中一旦有一个承诺失败了返回的新承诺就会失败

示例:同时加载一组图片,但是我们只需要用到其中的一张,就可以用 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 () {
  // 一个都没加载成功 QAQ
}

该方法还处于草案中,目前最新的 Chrome, Firefox, Safari 支持

来自:https://www.cnblogs.com/xyzhanjiang/archive/2020/12/05/14090357.html


链接: https://www.fly63.com/article/detial/9908

你真的了解 Promise 吗?Promise 必知必会(十道题)

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类

本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。

Promise 原理解析与实现(遵循Promise/A+规范)

Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数

简单模仿实现 Promise 的异步模式

这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。

数组的遍历你都会用了,那Promise版本的呢

在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,

Promise使用时应注意的问题

最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因

es6 Promise 的基础用法

想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行

关于 Promise 的 9 个提示

你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve

手写一款符合Promise/A+规范的Promise

Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!