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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
vue form check 表单验证的实现代码
2018/12/09 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
python实现微信远程控制电脑
2018/02/22 Python
使用python爬取B站千万级数据
2018/06/08 Python
python redis 删除key脚本的实例
2019/02/19 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python yield关键词案例测试
2019/10/15 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
库房管理员岗位职责
2014/03/09 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
保管员岗位职责
2015/02/14 职场文书
课改心得体会范文
2016/01/25 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL