实现同步请求_图解 Promise 实现原理（二）—— Promise 链式调用

摘要

很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。

1. 图解 Promise 实现原理（一）—— 基础实现
2. 图解 Promise 实现原理（二）—— Promise 链式调用
3. 图解 Promise 实现原理（三）—— Promise 原型方法实现
4. 图解 Promise 实现原理（四）—— Promise 静态方法实现

前言

上一节中，实现了 Promise 的基础版本：

//极简的实现+链式调用+延迟机制+状态
class Promise {
    
    callbacks = [];
    state = 'pending';//增加状态
    value = null;//保存结果
    constructor(fn) {
    
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
    
        if (this.state === 'pending') {
    //在resolve之前，跟之前逻辑一样，添加到callbacks中
            this.callbacks.push(onFulfilled);
        } else {
    //在resolve之后，直接执行回调，返回结果了
            onFulfilled(this.value);
        }
        return this;
    }
    _resolve(value) {
    
        this.state = 'fulfilled';//改变状态
        this.value = value;//保存结果
        this.callbacks.forEach(fn => fn(value));
    }
}

但链式调用，只是在 then 方法中 return 了 this，使得 Promise 实例可以多次调用 then 方法，但因为是同一个实例，调用再多次 then 也只能返回相同的一个结果，通常我们希望的链式调用是这样的：

//使用Promise
function getUserId(url) {
    
    return new Promise(function (resolve) {
    
        //异步请求
        http.get(url, function (id) {
    
            resolve(id)
        })
    })
}
getUserId('some_url').then(function (id) {
    
    //do something
    return getNameById(id);
}).then(function (name) {
    
    //do something
    return getCourseByName(name);
}).then(function (course) {
    
    //do something
    return getCourseDetailByCourse(course);
}).then(function (courseDetail) {
    
    //do something
});

每个 then 注册的 onFulfilled 都返回了不同的结果，层层递进，很明显在 then 方法中 return this 不能达到这个效果。引入真正的链式调用，then 返回的一定是一个新的Promise实例。

真正的链式 Promise 是指在当前 Promise 达到 fulfilled 状态后，即开始进行下一个 Promise（后邻 Promise）。那么我们如何衔接当前 Promise 和后邻 Promise 呢？（这是理解 Promise 的难点，我们会通过动画演示这个过程）。

链式调用的实现

先看下实现源码：

//完整的实现
class Promise {
    
    callbacks = [];
    state