详解ES6 Promise对象then方法链式调用


Posted in Javascript onOctober 20, 2018

promise俗称链式调用,它是es6中最重要的特性之一

简单的说可以不停的then调用嵌套在调用(异步之后,链式调用方式执行回调),这种操作方式称为promise

then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数。then()方法会返回一个新的Promise实例,所以then()方法后面可以继续跟另一个then()方法进行链式调用。

let p = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'success');
});
p.then(
  res => {
    console.log(res);
    return `${res} again`;
  }
)
  .then(
    res => console.log(res)
  );
// 连续
// success
// success again

但是前一个then()方法中的回调函数中又可能返回一个Promise实例,这时候后面一个then()方法中的回调函数会等前一个Promise实例的状态发生变化才会调用。

let p = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'success');
});
p.then(
  res => {
    console.log(res);
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 1000, 'success');
    });
  }
)
  .then(
    res => console.log(res)
  );
// 相隔1000ms
// success
// success

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 #Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
vue 项目地址去掉 #的方法
Oct 20 #Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 #Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 #Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 #Javascript
You might like
我的论坛源代码(七)
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Python 的内置字符串方法小结
2016/03/15 Python
python素数筛选法浅析
2018/03/19 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python将数据插入数据库的代码分享
2020/08/16 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
什么是索引指示器
2012/08/20 面试题
《白鹅》教学反思
2014/04/13 职场文书
全国文明单位申报材料
2014/05/31 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
springboot+VUE实现登录注册
2021/05/27 Vue.js
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers