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

2023-06-03 11:06:20 901人浏览独家记忆

摘要

本文首发于 vivo互联网技术微信公众号链接： https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者：孔垂亮很多同学在学习 Promise 时，知其然却不知其所以然，对其中的

本文首发于 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});

--结束END--

本文标题: 图解 Promise 实现原理（一）—— 基础实现

本文链接: https://lsjlt.com/news/234249.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341