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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Javascript实现的分页函数
2006/12/22 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python如何输出整数
2020/06/07 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
为什么要用EJB
2014/04/17 面试题
2014年售票员工作总结
2014/11/19 职场文书
2015年中秋节主持词
2015/07/30 职场文书