图解Promise实现原理（一）——基础实现-创新互联

本文首发于 vivo互联网技术 微信公众号 
链接： https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ
作者：孔垂亮

成都创新互联公司2013年至今，是专业互联网技术服务公司，拥有项目成都做网站、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元郊区做网站,已为上家服务,为郊区各地企业和个人服务,联系电话:13518219792

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

本系列文章有如下几个章节组成：

1. 图解 Promise 实现原理（一）—— 基础实现

2. 图解 Promise 实现原理（二）—— Promise 链式调用

3. 图解 Promise 实现原理（三）—— Promise 原型方法实现

4. 图解 Promise 实现原理（四）—— Promise 静态方法实现

本文适合对 Promise 的用法有所了解的人阅读，如果还不清楚，请自行查阅阮一峰老师的 《 ES6入门 之 Promise 对象》。

Promise 规范有很多，如 Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+，有兴趣的可以去了解下，最终 ES6 中采用了 Promise/A+ 规范。所以本文的Promise源码是按照 Promise/A+规范来编写的（不想看英文版的移步 Promise/A+规范中文翻译）。

引子

为了让大家更容易理解，我们从一个场景开始，一步一步跟着思路思考，会更容易看懂。

考虑下面一种获取用户 id 的请求处理：

//不使用Promise        http.get('some_url', function (result) {
    //do something
    console.log(result.id);
});//使用Promisenew Promise(function (resolve) {
    //异步请求
    http.get('some_url', function (result) {
        resolve(result.id)
    })
}).then(function (id) {
    //do something
    console.log(id);
})

乍一看，好像不使用 Promise 更简洁一些。其实不然，设想一下，如果有好几个依赖的前置请求都是异步的，此时如果没有 Promise ，那回调函数要一层一层嵌套，看起来就很不舒服了。如下：

//不使用Promise        http.get('some_url', function (id) {
    //do something
    http.get('getNameById', id, function (name) {
        //do something
        http.get('getCourseByName', name, function (course) {
            //dong something
            http.get('getCourseDetailByCourse', function (courseDetail) {
                //do something
            })
        })
    })
});//使用Promisefunction 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); // getNameById 是和 getUserId 一样的Promise封装。下同}).then(function (name) {
    //do something
    return getCourseByName(name);
}).then(function (course) {
    //do something
    return getCourseDetailByCourse(course);
}).then(function (courseDetail) {
    //do something});