iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >图解 Promise 实现原理(一)—— 基础实现
  • 901
分享到

图解 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 用法的目的。

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

  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});

--结束END--

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

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 图解 Promise 实现原理(一)—— 基础实现
    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者:孔垂亮很多同学在学习 Promise 时,知其然却不知其所以然,对其中的...
    99+
    2023-06-03
  • 图解 Promise 实现原理(四)—— Promise 静态方法实现
    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ 作者:Morrain了用法,原生提供了Promise对象。更多关于 Promi...
    99+
    2023-06-03
  • Promise+async+Generator的实现原理
    目录前言1. 观察者模式2. Promise A+规范3. then的链式调用4.值穿透 & 状态已变更的情况5.兼容同步任务Promise.prototype.catch(...
    99+
    2024-04-02
  • 详解hibernate4基本实现原理
    整体流程通过configuration来读cfg.xml文件得到SessionFactory工厂通过SessionFactory工厂来创建Session实例通过Session打开事务通过session的api操作数据库事务提交关闭连接说明:...
    99+
    2023-05-31
    hibernate4 原理 te
  • 基于ReentrantLock的实现原理讲解
    目录ReentrantLock实现核心–AQS(AbstractQueuedSynchronizer)Node结构ReentrantLock实现分析二者关联NonfairSync分析...
    99+
    2024-04-02
  • 【算法基础】数据结构| 单链表+双链表 代码实现+图解+原理
    博主简介:努力学习的预备程序媛一枚~博主主页: @是瑶瑶子啦所属专栏: Java岛冒险记【从小白到大佬之路】 前言 因为瑶瑶子正在备战蓝桥杯和校内ACM选拔赛,最近在学习算法相关的知识。我是借...
    99+
    2023-09-18
    算法 数据结构 java c++ 链表
  • 夯实Java基础系列18:深入理解Java内部类及其实现原理
    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看https://github.com/h3pl/Java-Tutorial喜欢的话麻烦点下Star哈文章首发于我的个人博客:www.how2pla...
    99+
    2023-06-02
  • 如何实现一个简易promise
    这篇文章主要介绍如何实现一个简易promise,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!step1 搭建框架 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、reject的执行函...
    99+
    2023-06-25
  • Golang基础学习之map的实现原理是什么
    这篇文章主要讲解了“Golang基础学习之map的实现原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Golang基础学习之map的实现原理是什么”吧!0. 简介哈希表是常见的数据结...
    99+
    2023-07-05
  • 一文详解手动实现Recoil状态管理基本原理
    目录前言我们先看一下Recoil的基本使用手动实现前言 目前,前端流行的状态管理有很多,Redux、Mobx、Mobx-lite、Recoil、jotai、xstate等等,根据多年...
    99+
    2023-05-19
    Recoil基本原理 Recoil状态管理
  • 一文了解Seata的实现原理
    目录一、背景二、分布式事务规范2.1、分布式事务相关概念2.2、分布式事务实现规范2.2.1、XA2.2.2、柔性事务的最终一致性三、Seata 架构3.1、系统组成3.2、工作模式...
    99+
    2024-04-02
  • MySQL DISTINCT 的基本实现原理详解
    前言 DISTINCT 实际上和 GROUP BY 操作的实现非常相似,只不过是在 GROUP BY 之后的每组中只取出一条记录而已。所以,DISTINCT 的实现和 GROUP BY 的实现也基本差不多,...
    99+
    2024-04-02
  • JavaScript实现Promise流程详解
    目录构造函数then 和 catch方法解决异步问题all和race方法构造函数 首先我们来看一下我们是如何使用promise的,我们在实例化对象是这么使用的: let p1...
    99+
    2024-04-02
  • 如何进行Promise原型方法实现
    这篇文章给大家介绍如何进行Promise原型方法实现,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Promise 是异步编程的一种解决方案,它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pr...
    99+
    2023-06-03
  • 如何用代码实现HTML5Canvas基础绘图
    如何用代码实现HTML5Canvas基础绘图,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。基本绘制XML/HTML Code复制内容到剪贴...
    99+
    2024-04-02
  • 一文详解 Compose Navigation 的实现原理
    目录前言1. 从 Jetpack Navigation 说起2. 定义导航3. 导航跳转4. 保存状态SaveableStateHolder & rememberSaveab...
    99+
    2024-04-02
  • 教你一步步实现一个简易promise
    目录step1 搭建框架step2 填充搭建好了的Promise框架总结step1 搭建框架 1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、...
    99+
    2024-04-02
  • 关于Promise基本方法的简单实现
    目录前言catch() 方法done() 方法finally() 方法Promise.all() 方法Promise.race() 方法Promise.resolve() 和 Pro...
    99+
    2024-04-02
  • java基础--自己动手实现一个LRU
    目录LinkedHashMap 实现继承 LinkedHashMap组合 LinkedHashMap链表 + HashMap 实现LRU,即 Least Recently Use ,...
    99+
    2024-04-02
  • C++ 位图及位图的实现原理
    概念 位图就是bitmap的缩写,所谓bitmap,就是用每一位来存放某种状态,适用于大规模数据,该数据都是不重复的简单数据。通常是用来判断某个数据存不存在的 例如:给40亿个不重复...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作