Promise函数then的奥秘

harriszh 发布于2019-08-23 10:26 / 346人阅读

Promise的then方法可以接受前一个函数的执行结果，还可以保证另一个Promise的顺序执行，这到底是怎么做到的呢？

原理图(先上图)

问题需求

如何保证多个 promise 顺序执行？
实例：

var f1 = function (){
    return new  Promise(function (resolve, reject){
        setTimeout(function (){
            console.log("f1 ok!")
            resolve("f1 ok!");
        }, 1000)
    });
}
var f2 = function (){
    return new  Promise(function (resolve, reject){
        setTimeout(function (){
            console.log("f2 ok!")
            resolve("f2 ok!");
        }, 3000)
    });
}
var f3 = function (){
    return new  Promise(function (resolve, reject){
        setTimeout(function (){
            console.log("f3 ok!")
            resolve("f3 ok!");
        }, 2000)
    });
}

当然如果要并行的话，我们很容易想到 Promise.all 方法:

Promise.all([f1(), f2(), f3()]).then(function (data){
    console.log(data)
})
// f1 ok! 
// f3 ok! 
// f2 ok! 
// ["f1 ok!", "f2 ok!", "f3 ok!"]

如果要顺序执行：

f1().then(f2).then(f3)
// f1 ok!
// f2 ok!
// f3 ok!

//或者这样

function f(all) {
    var promise = Promise.resolve();
    all.forEach((p, index) => {
        promise = promise.then(p)
    })
}
f([f1, f2, f3])

那么问题来了，then是如何做到顺序执行的呢，参数既可以是一个普通函数，也可是是一个返回promise的函数？

then的奥秘

很多实现promise的库都比较复杂，如果自己实现的话，可以借鉴下面简单的代码：

Promise.prototype.then = function(onFulfilled, onRejected) {
    var promise = this;
    return new Promise(function(resolve, reject) {
        function handle(value) {
            var ret = typeof onFulfilled === "function" && onFulfilled(value) || value;
            if (ret && typeof ret["then"] == "function") {
                ret.then(function(value) {
                    resolve(value);
                }, function(reason) {
                    reject(reason);
                });
            } else {
                resolve(ret);
            }
        }
        function errback(reason) {
            reason = typeof onRejected === "function" && onRejected(reason) || reason;
            reject(reason);
        }
        if (promise._status === "PENDING") {
            promise._resolves.push(handle);
            promise._rejects.push(errback);
        } else if (promise._status === FULFILLED) { 
            callback(promise._value);
        } else if (promise._status === REJECTED) {
            errback(promise._reason);
        }
    });
}

重点在then的实现，看上述代码，每个then返回的是什么，是一个新的 Promise，一个新的 Promise，一个新的 Promise
第二个重点是，在内部又处理了一个回调函数运行结果是一个 promise的判断，如果是那么等待这个promise运行结束才调用 resolve 更改状态，关键是resolve的调用时机，resolve的调用时机，才能够往下执行，这两步就是then函数的关键。
是不是有点晕，请看最开始的图。

海外云主机服务器托管 then promise Promise使用 promise用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96345.html

让你从头到尾把promise整的明明白白

摘要：它的作用是为实例添加状态改变时的回调函数。里面有两个回调函数，前者返回的回调函数，后者是可选值。可以看成是的别名专门用来指定错误发生时的回调函数。最近一直私下在看Android项目，前端这一块没怎么仔细研究。昨天在写重构公司前端项目的时候，我发现一旦有异步的任务，脑海里面条件反射一般的出现promise的字样。重构的多了心就就在纳闷：既然promise这么好用，我能不能自己手写一个pro...

silenceboy 2019-05-22 16:41 评论0 收藏0
异步发展流程 —— 手写一个符合 Promise/A+ 规范的 Promise

摘要：构造函数的实现我们在使用的时候其实是使用关键字创建了一个的实例，其实是一个类，即构造函数，下面来实现构造函数。 showImg(https://segmentfault.com/img/remote/1460000018998456); 阅读原文概述 Promise 是 js 异步编程的一种解决方案，避免了回调地狱给编程带来的麻烦，在 ES6 中成为了标准，这篇文章重点不是叙...

UnixAgain 2019-08-23 12:18 评论0 收藏0
Promise初级与进阶---都在这了

摘要：处理和前一个回调函数运行时发生的错误发生错误对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止。 0 前言我一直以为我对Promise比较了解，相关的方法已经非常熟悉了，直到我看到这篇文章，里面提出了这样一个问题：Q: 假定 doSomething() 和 doSomethingElse() 均返回 promises，下面的四种 promises 的区别是什么 /...

Ocean 2019-08-20 14:43 评论0 收藏0
Eventloop不可怕，可怕的是遇上Promise

摘要：就是每次传入的函数最后是的任务之后，开始执行，可以看到此时会批量执行中的函数，而且还给这些中回调函数放入了一个这个很显眼的函数之中，表示这些回调函数是在微任务中执行的。下一模块会对此微任务中的插队行为进行详解。有关Eventloop+Promise的面试题大约分以下几个版本——得心应手版、游刃有余版、炉火纯青版、登峰造极版和究极变态版。假设小伙伴们战到最后一题，以后遇到此类问题，都是...

olle 2019-08-23 16:28 评论0 收藏0
学习 Promise，掌握未来世界 JS 异步编程基础

摘要：构造函数规定，对象是一个构造函数，用来生成实例。如果中的回调函数抛出一个错误，那么返回的将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。其实想写 Promise 的使用已经很长时间了。一个是在实际编码的过程中经常用到，一个是确实有时候小伙伴们在使用时也会遇到一些问题。Promise 也确实是 ES6 中对于写 JS 的方式，有着真正最大影响的 API 特性之一。本...

Vicky 2019-08-23 12:23 评论0 收藏0