文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

图解 Promise 实现原理(一)—— 基础实现

2023-06-03 11:59

关注

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

很多同学在学习 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 ,那回调函数要一层一层嵌套,看起来就很不舒服了。如下:

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 资料下载
  • 历年真题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯