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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
js实现文字截断功能
Sep 14 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
深入学习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
mysq GBKl乱码
2006/11/28 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
matplotlib给子图添加图例的方法
2018/08/03 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
深入了解python中元类的相关知识
2019/08/29 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python-openCV开运算实例
2020/07/05 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
应聘自荐书
2013/10/08 职场文书
初中数学教学反思
2014/01/16 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python