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 web对话框与弹出窗口
Feb 22 Javascript
javascript preload&lazy load
May 13 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
js中的json对象详细介绍
Oct 29 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
Puppet的一些技巧
2018/09/17 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
机关门卫岗位职责
2013/12/30 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
检讨书范文1000字
2015/01/28 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python