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 04 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
蜜蜂引路教学反思
2014/02/04 职场文书
致共产党员倡议书
2014/04/16 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
会议简讯范文
2015/07/20 职场文书
会议承办单位欢迎词
2015/09/30 职场文书