位置：首页-资讯-后端开发

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

2023-06-03 11:59

短信预约 -IT技能 免费直播动态提醒

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

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

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

图解 Promise 实现原理（一）—— 基础实现
图解 Promise 实现原理（二）—— Promise 链式调用
图解 Promise 实现原理（三）—— Promise 原型方法实现
图解 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 ，那回调函数要一层一层嵌套，看起来就很不舒服了。如下：

//不使用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});

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉