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(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
PHP4之COOKIE支持详解
2006/10/09 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
sina的lightbox效果。
2007/01/09 Javascript
JavaScript的Cookies
2008/01/16 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python实现网站的模拟登录
2016/01/04 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python异常处理例题整理
2019/07/07 Python
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python基础之hashlib模块详解
2021/05/06 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL