Promise扫盲贴


Posted in Javascript onJune 24, 2019

then

then函数可以return另一个promise:

const p1 = new Promise((resolve, reject) =>{
  resolve('p1')
})
const p2 = new Promise((resolve, reject) =>{
 setTimeout(() =>{
  resolve('p2')
 },3000)
})
p1.then(res => {
 console.log(res)
  return p2
}).then(res =>{ 
  // p2 resolve后才执行
  console.log(res)
})
//p1
// 3s后输出...
// p2

那么这个p2就会代替当前p1的状态,等到新的p2的状态修改时,下一个then才会执行

catch

1. 作用

可以捕获到promise程序执行中的error,等同于  .then(null, rejection)  或  .then(undefined, rejection)

2. 可以获取到的错误

promise函数体中抛出的error。在promise resolve后,再抛出错误,不会被捕获

const p1 = new Promise((resolve,reject) => {throw new Error('error')})
p1.catch(error => console.log(error))  // Error: error

promise的reject操作

const p2 = new Promise((resolve,reject) => reject('rejected'))
p2.catch(error => console.log(error)) // rejected

then 函数体中抛出的error

const p3 = new Promise((resolve,reject) => resolve('resolved'))
p3.then(res =>{
  throw new Error('error')
}).catch(error => console.log(error)) // Error: error

then函数可以返回一个promise(如果没有定义catch方法),如果这个promise函数体中有reject或者error,也可以捕获到

3. 推荐使用catch方式捕获错误,而不是then的第二个参数:

因为catch可以捕获到它前面所有then方法中的错误

finally

  • 不管promise最后状态如何,都会执行的操作
  • 没有参数,获取不到当前promise最后的状态

Promise.all

1. 参数

参数不仅仅可以是数组,具有Iterator接口的对象都可以。
数组参数的每一个元素为promise实例,如果不是,就会调用Promise.resolve转换为Promise实例

const obj = {
  [Symbol.iterator]() {
    let index = 0
    return {
      next() {
        return {
          // promise对象 和 其他类型都可以
          value: new Promise(resolve => resolve(index++)), done: index > 2
          // value: index++, done: index > 2
        }
      }
    }
  }
}
const p = Promise.all(obj)
p.then(res => {
  console.log(res) // [0, 1]
})

2. 状态

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定,分成两种情况:

  • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

3. catch

如果参数中的promise定义了catch方法,那么Promise.all()的catch就不会捕获到错误

Promise.race

  • 只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
  • 参数、catch规则同Promise.all

Promise.resolve

将现有对象转为Promise对象。

1. 参数

  • 参数为promise实例:原封不动的返回这个实例。
  • 参数为thenable对象:将它转为promise对象,然后立即执行它的then方法
  • 参数不是thenable对象,或者是一个原始值:返回一个新的promise对象,状态为resolved
  • 没有参数:直接返回衣蛾resolved状态的promise对象

Promise.reject

返回一个状态为rejected的promise实例

Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数

const thenable = {
 then(resolve, reject) {
  reject('error');
 }
};

Promise.reject(thenable)
.catch(e => {
 console.log(e === thenable)
})
// true e并不是'error'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 #Javascript
前端天气插件tpwidget使用方法详解
Jun 24 #Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
JS实现给数组对象排序的方法分析
Jun 24 #Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 #Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 #Javascript
JS字符串常用操作方法实例小结
Jun 24 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
深入浅出php socket编程
2015/05/13 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python将excel转换为csv的代码方法总结
2019/07/03 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
pandas 对group进行聚合的例子
2019/12/27 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python 利用toapi库自动生成api
2020/10/19 Python
python操作toml文件的示例代码
2020/11/27 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
毕业生求职信范文
2014/06/29 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2014年调度员工作总结
2014/11/19 职场文书
担保书格式
2015/01/20 职场文书
东京审判观后感
2015/06/01 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Django框架中视图的用法
2022/06/10 Python