Promise.prototype.then()

Proise实例的then方法是定义在原型对象Promise.prototype上的,它的作用是为Promise实例添加状态改变时的回调函数。

该方法可以接收两个回调函数作为参数,其中第二个回调函数是可选的。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用,第二个回调函数是 Promise 对象的状态变为 Rejected 时调用。

下面从以下几点进行说明:

  1. then 方法返回的是一个Promise实例,但是需要注意的是并不是原来调用它的那个Promise实例而是一个新的Promise实例。

    下面用代码来说明:

    let promise = new Promise( function (resolve, reject) {
        resolve();
        console.log("promise");
    });
    
    let promise_then = promise.then(function () {
    	console.log("promise_then");
    });
    
    promise_then.then(function () {
        console.log("promise_then_then")
    })
    
    // 运行结果:
    promise
    promise_then
    promise_then_then
    

    最先打印出 promise 的原因是then方法的回调函数要在所有同步任务执行完后再执行,所以会先执行 console.log("promise") 然后再去执行下面then方法的回调函数。

    当程序执行到第6行结束时,promisepromise_then 的状态如下图所示:

    可见then方法返回的是一个新的promise实例,并且此时promise_then的状态为 pending

    当执行完第8行时,promisepromise_then 的状态如下图所示:



    可见此时 promise_then 的状态变为 resolved,也就是说只要then方法中的程序正常执行完不报错,返回实例的状态就变为 resolved (这个地方原因不是很清楚,如果有明白的,欢迎留言告知,谢谢哦)。

    这个时候再往下执行 promise_then.then 就会打印出 promise_then_then

    上面的代码等价于

    // ES5写法
    let promise = new Promise( function (resolve, reject) {
        resolve();
        console.log("promise");
    });
    promise.then(function () {
    	console.log("promise_then");
    }).then(function () {
        console.log("promise_then_then")
    });
    
    // ES6写法
    let promise = new Promise( (resolve, reject) => {
        resolve();
        console.log("promise");
    });
    promise.then(
        () => console.log("promise_then")
    ).then(
        () => console.log("promise_then_then")
    );
    
  2. then 方法中前一个回调函数的返回值可以传递给下一个回调函数。

    1. 前一个回调函数的返回值是一个非promise实例时,比较简单,看一下下面的代码就很容易理解。
    let promise = new Promise( function (resolve, reject) {
        resolve();
    });
    promise.then(function () {
    	return "aaa";
    }).then(function (data) {
        console.log(data);
    });
    // 输出结果
    "aaa"
    
    1. 当前一个回调函数的返回值是一个promise实例时,下一个then方法的执行情况要根据这个promise实例的状态来执行。

      用下面的代码来解释一下:

    // 如果形参是'Resolved' -> 状态为‘Resolved’的promise实例
    // 如果形参是'Rejected' -> 状态为‘Rejected’的promise实例
    function createPromise(status) {
        var p = new Promise(function (resolve, reject) {
            if (status === "Resolved") {
                resolve()
            } else {
                reject();
            }
        });
        return p;
    }
    
    createPromise("Resolved").then(function () {
        return createPromise("Rejected"); // 返回的promise实例的状态是“Rejected”
    }).then(function () {
        console.log("前一个回调函数的返回值promise实例的状态是'Resolved'");
    }, function () {
        console.log("前一个回调函数的返回值promise实例的状态是'Rejected'");
    });
    // 输出结果
    "前一个回调函数的返回值promise实例的状态是'Rejected'"
    
    createPromise("Resolved").then(function () {
        return createPromise("Resolved"); // 返回的promise实例的状态是“Resolved”
    }).then(function () {
        console.log("前一个回调函数的返回值promise实例的状态是'Resolved'");
    }, function () {
        console.log("前一个回调函数的返回值promise实例的状态是'Rejected'");
    });
    // 输出结果:
    "前一个回调函数的返回值promise实例的状态是'Resolved'"
    

    根据上面代码的输出结果可以清晰地看到后一个回调函数的执行情况是根据前一个回调函数返回的promise的状态来执行的,如果返回的promise实例的状态为 Resolved ,那么就执行第一个函数,如果返回的promise实例的状态为 Rejected ,那么就执行第二个函数。

如果不恰当之处,欢迎指正哦 _

聊一聊看似简单的Promise.prototype.then()方法的更多相关文章

  1. promise(3) '静态'方法

    要是人没有梦想,跟咸鱼又有什么两样了?一直恐惧读源码,哪怕是一个简单的库也是读百来行遇到难点就放弃了.对于新的东西也仅仅是知道它拿来干什么,社区资源在哪里,要用时就突击文档资源使用即可.未有过深入之心 ...

  2. es6语法中promise的使用方法

    Promise是一个构造函数,它有resolve,reject,race等静态方法;它的原型(prototype)上有then,catch方法,因此只要作为Promise的实例,都可以共享并调用Pro ...

  3. 简单的 Promise 实现

    参考 http://www.tuicool.com/articles/RzQRV3 var PENDING = undefined, FULLFILLED = 1, REJECTED = 2; var ...

  4. Promise (2) 基本方法

    "I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...

  5. 实现简单的promise

    只考虑成功时的调用,方便理解一下promise的原理promise的例子: 1. 接下来一步步实现一个简单的promise step1:promise 接受一个函数作为构造函数的参数,是立即执行的,并 ...

  6. 浅析 JavaScript 中的 Function.prototype.bind() 方法

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

  7. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  8. JavaScript 中的 Function.prototype.bind() 方法

    转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...

  9. 为Promise添加finally方法支持,把小程序函数变成promise函数

    // 为Promise添加finally方法支持 Promise.prototype.finally = function (callback) {   let P = this.constructo ...

随机推荐

  1. Maven 无法下载依赖包的解决方法---三步dao!!!

    版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/WLCYSYS/p/11932157.html maven 自动下载依赖包出现 ...

  2. 小白学 Python 爬虫(7):HTTP 基础

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  3. Gemini.Workflow 双子工作流高级教程:数据库-设计文档

    数据库设计文档 数据库名:Workflow_New 序号 表名 说明 1 WF_Activity wf_Activity 2 WF_ActivityInstance wf_ActivityInstan ...

  4. pynlp报错:pynlpir.LicenseError: Your license appears to have expired. Try running "pynlpir update"解决办法。

    使用pyltp做文本挖掘时报错: pynlpir.LicenseError: Your license appears to have expired. Try running "pynlp ...

  5. linux中Nginx安装

    linux中Nginx安装 编译安装 ​ Nginx的优点太多,这里不再赘述,详情请看这篇博客深入理解nginx. ​ Nginx的安装有rpm包安装.编译安装和docker安装.本文将介绍编译安装方 ...

  6. win10在python3.6里安装pycrypto-2.6.1

    简单的一步搞定 下载pycrypto-2.6.1-cp36-cp36m-win_amd64.whl文件,然后pip install即可 链接: https://pan.baidu.com/s/1Awl ...

  7. Go语言冒泡、选择、插入、快速排序实战浅析

    Hello,各位小伙伴大家好,我是小栈君,今天为大家带来的分享是关于go语言中的排序实战浅析. 我们就实际操作关于go的冒泡排序.选择排序.插入排序和快速排序四种方式的理论和实战进行分享,希望能够为大 ...

  8. python_tornado

    1.创建Tornado服务器    1.创建Application对象        Application是Torando最核心的类        所有关于服务器的配置信息都写在Applicatio ...

  9. php踩过的那些坑(3) 数据类型转换

    一.前方有坑 php属于弱类型语言,不会强迫工程师在使用变量之前先声明变量类型,开发时爽了,但是也带来不少的坑.下面就举一个坑的例子: 例1: $str = ‘haodaquan'; echo ($s ...

  10. Unity3D 卡通描边之控制线条粗细

    一.前言 之前我发表过一篇Unity3D 卡通渲染 基于退化四边形的实时描边,最重要的实时描边已经实现了,本文接下来要完善一下它. 在之前的实时描边中,使用了几何着色器中的LineStream来进行绘 ...