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 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery聚合函数实例
May 21 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Angular单元测试之事件触发的实现
Jan 20 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
多文件上载系统完整版
2006/10/09 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
react build 后打包发布总结
2018/08/24 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python添加模块搜索路径方法
2017/09/11 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
主管会计岗位职责
2014/03/13 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
考研英语复习计划
2015/01/19 职场文书
工作岗位职责范本
2015/02/15 职场文书
地心历险记观后感
2015/06/15 职场文书
2016年清明节寄语
2015/12/04 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript