详解JavaScript中Promise类的使用方法

更新时间：2023年05月07日 14:01:49 作者：会说法语的猪

这篇文章主要为大家详细介绍了JavaScript中Promise类的使用方法，文中的示例代码简洁易懂，对我们学习JavaScript有一定的帮助，需要的可以参考一下

这篇主要讲一下Promise的类方法的基本使用，至于Promise的基本使用这里就不赘述了，之前也有手写过Promise、实现了Promise的核心逻辑。其实我们平时用Promise也挺多的，不过又出现了两个新的语法（ES11，ES12新增了两个），所以这篇就简单说一下，也挺简单

1. all

Promise.all方法我们可以传入一个数组参数，数组中可以放多个Promise，它会等所有的Promise的状态都为fulfilled时，来获取最终的结果，它会把所有每个Promise resolve的结果，放在一个数组中，且结果的顺序和我们传入的数组参数中的Promise保持一直（跟时间无关）

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方法中拿到最终的结果如下：

但是all方法是有个缺陷的，当有其中一个Promise变成rejected状态时，新Promise就会立即变成对应的reject状态，也就是只能在catch中捕获到错误，其他fulfilled状态的值我们是拿不到的。因此有了allSettled方法

2. allSettled

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

该方法会在所有的Promise都有结果时（无论是fulfilled，还是rejected）都会在then方法中拿到我们的最终的结果：

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拒绝了，但是我们同样可以拿到结果，但是这个result结果数组结构有点儿变化，我们看下打印结果：

我们可以看到allSettled的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的；这个对象中包含status状态，以及对应的value值

3. race

race是竞技、赛跑的意思，也就是谁先有结果我就要谁，这个result拿到的结果就不是一个数组了，而是最快的一个Promise resolve出来的结果

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)
})

看下控制台的打印：

因为p3用时最短，最快，所以result拿到的就是p3resolve出的结果值，但是如果最快的那个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时间设置为0.5s，且是rejected的状态，我们再看下打印结果：

直接就会被catch捕获了，这样看来，如果最快的那个状态为rejected状态的话，那我们后面的resolve的状态也拿不到值了。如果我们想拿到最快的fulfilled状态的值，也就是如果前面有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，再看一下打印结果：

我们在1s后就会拿到p3 resolve的结果，那个p2 reject的就忽略掉了，那如果我们所有的Promise都是rejected状态时它会怎么做呢？我们看一下：

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)
})

我们看下打印结果：

它就会走catch了，并且打印出了错误信息，其中的 err.errors中会有我们reject传递的错误信息，err是它内部封装的错误提示

到此这篇关于详解JavaScript中Promise类的使用方法的文章就介绍到这了,更多相关JavaScript Promise类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

node.js 一个简单的页面输出实现代码
最近决定重拾node.js，用它来做一个合并JS文件的东西。由于忘得差不多了，先看能不能输出一个页面来再说。以下是我的一些笔记，省得以后又忘净光
2012-03-03
javascript面向对象之访问对象属性的两种方式分析
这篇文章主要介绍了javascript面向对象之访问对象属性的两种方式分析,实例分析了直接访问对象属性的方式与数组访问方式,需要的朋友可以参考下
2015-01-01
layer关闭弹出窗口触发表单提交问题的处理方法
今天小编就为大家分享一篇layer关闭弹出窗口触发表单提交问题的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
微信小程序开发之实现食堂点餐系统
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的食堂点餐系统，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下
2023-01-01
js中substring和substr两者区别和使用方法
这篇文章主要介绍了js中substring和substr两者区别和使用方法,每一个步骤都有相应的文字介绍，感兴趣的小伙伴们可以参考一下
2015-11-11
浅谈webpack组织模块的原理
这篇文章主要介绍了浅谈webpack组织模块的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
js+css实现卡片轮播图效果
这篇文章主要为大家详细介绍了js+css实现卡片轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
详解JavaScript中的类型判断与类型转换
这篇文章主要给大家讲解一下JavaScript中的类型判断与类型转换的基本概念和使用方法,对我们的学习JavaScript的类型判断与转换有一定的帮助,需要的朋友可以参考下
2023-07-07
JavaScript Table排序 2.0 (更新)
JavaScript,Table,排序,order,attribute,property,sort,Compare
2009-05-05
JS操作JSON要领详细总结
JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包，下面与大家分享下JSON操作的相关知识
2013-08-08