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. MySQL 支持 emoji 图标存储

    在MySLQ中 UPDATA 和 INSERT 数据的时候,如果数据上面带有emoji图标,例如:?.?.? 很容易更新或者插入不成功,导致报错. 1 2 Error: ER_TRUNCATED_WR ...

  2. 解决无法定位软件包 或 install net-tools

    解决无法定位软件包  或  install net-tools  当我们安装好Linux后,因为里面有很多功能服务没有安装(如ifconfig.vsftpd) 所以出现一些command  '**** ...

  3. 护网杯2019 mergeheap --pwn

    护网 又是签到 一天 这道题一开始 不懂得如何泄露 libc 信息,就蒙了  后来群里师傅也是刚刚好 做出 到这里 我就接着做了 . 先看下保护,发现  全开了 然后 就看下流程 大概 就是添加  c ...

  4. 【Luogu P3387】缩点模板(强连通分量Tarjan&拓扑排序)

    Luogu P3387 强连通分量的定义如下: 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶 ...

  5. linux [CTRL]+c与[CTRL]+d

    [CTRL]+c:中断目前程序.用于在linux中输入了错误的命令或者参数,有的时候会在系统不停的运行,如果想让程序需停下来,可以使用[CTRL]+C [CTRL]+d:这个组合键代表着键盘输入结束( ...

  6. C#学习笔记02--Bool,关系/逻辑运算符, if/switch语句

    一. Bool类型   逻辑判断, C#中只有true和false两个值; 使用场景: 在分支和循环语句中, 常用作为判断条件来使用;   二. 关系运算符   关系运算符 (> < &g ...

  7. 《手把手教你》系列练习篇之4-python+ selenium自动化测试(详细教程)

    1.  简介 今天我们继续前边的练习,学习和练习一下:如何使用webdriver方法获取当前测试页面的URL.如何获取当前页面的title. 2. webdriver方法获取当前测试页面的URL 本小 ...

  8. MySQL数据库day20190922

    1.dos命令 set names gbk; 2.MySQL练习#创建school数据库: create database school;#切换school数据库: use school; # pri ...

  9. 【JavaEE】之MyBatis插入数据后获取自增主键

    很多时候,我们都需要在插入一条数据后回过头来获取到这条数据在数据表中的自增主键,便于后续操作.针对这个问题,有两种解决方案: 先插入,后查询.我们可以先插入一条数据,然后根据插入的数据的各个字段值,再 ...

  10. tabBarItem是模型,只有控件才有textColor属性

    如果通过模型设置控件的文字颜色,只能通过文本属性(富文本:颜色,字体,图文混排,空心)