×

学习下Promise中then的链式回调

作者:天空2019.01.28来源:Web前端之家浏览:1922评论:0
关键词:promise回调函数

学习下Promise中then的链式回调,首先来看个DEMO。

new Promise((resolve, reject) => {
            reject(1); // 确定promise状态为rejected
        }).then((fullfilled) => {
            console.log(fullfilled);
        }, (rejected) => {
            console.log(rejected, '2-1'); // 执行这里,then方法必须返回一个新的Promise实例,这个没有明式 return 值,便隐式触发新promise的fullfilled状态,进入下一个then的fullfilled回调
        }).then((fullfilled) => {
            console.log(fullfilled, '3-1'); // 执行这里,因上一步resolve未传值,所以fullfilled为undefined,继续隐式触发fullfilled回调
        }, (rejected) => {
            console.log(rejected, '3-2');
        }).then((fullfilled) => {
            console.log(fullfilled, '4-1'); // 执行这里
            return Promise.reject(5); // 明式返回rejected的promise
        }, (rejected) => {
            console.log(rejected, '5-1');
        }).catch((error) => {
            console.log(error, '6-1'); // 执行这里,被catch捕获,error为上一步reject传入的值。因Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数,所以catch同样返回一个新的promise,若没有显示指定,便同上执行隐式操作
        }).then(fullfilled => {
            console.log(fullfilled, '7-1'); // 执行这里
        }, rejected => {
            console.log(rejected, '7-2');
        })

运行结果如下:

1 "2-1"
undefined "3-1"
undefined "4-1"
5 "6-1"
undefined "7-1"

总结:

Promise.prototype.then()返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

then方法中若有显式 return 一个新的 promise(包括fullfilled和rejected)则显示执行。若无显式指定,则隐式触发新promise的pending->fullfilled状态变更,进入下一个then的fullfilled回调。

因Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数,所以catch同样返回一个新的promise,若没有显示指定,便执行隐式操作。

建议:

不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jscnv258305k.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 老部落运维

    都是拼音的错呵呵...

  • admin

    已加上,麻烦把我的文字改下:Web前端之家...

  • 老部落运维

    已添加贵站链接我站:https://www.laobuluo.com/(老部落运维)...

  • admin

    这个问题需要看不同的终端预览,可以加群具体聊,谢谢!...

  • 竹叶轻拂水

    在写PC端页面的时候,字体超过16px有的字体会显示的上下不一,凸出来一点,很难看,有没有什么好的方...

  • 素材火

    前三意料之中,中国只有百度上榜...

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero