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 学习笔记 选择器之三
Jul 23 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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
PHP缓存技术的使用说明
2011/08/06 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
营销计划书范文
2015/01/17 职场文书
工程质检员岗位职责
2015/04/08 职场文书
人代会简报
2015/07/21 职场文书
远程教育培训心得体会
2016/01/09 职场文书
浅谈MySQL函数
2021/10/05 MySQL
基于angular实现树形二级表格
2021/10/16 Javascript