网站首页 > 博客文章 正文
“我最近学习了Promise对象的使用,真是太棒了,使用链式调用代替了嵌套回调,代码书写起来很方便还便于阅读” 小白说。
麦克黑:“是的,Promise是一种异步编程解决方案,尤其在多接口调用的时候会起到非常大的作用,方便开发” 。
小白挠挠头说:“我阅读了代码知道了他的使用方式,我知道他有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),也能够在项目中熟练使用,但我并不知道Promise内部的实现原理” 。
麦克黑:“如果你感兴趣,我觉的你可以尝试自己造轮子,来自己写一个Promise对象,”
小白:“如果可以的话就太棒了,但是我应该如何着手写一个自己的Promise对象呢?”
“当然可以,不过,以下谈话价值两杯咖啡外加一个鸡肉卷”麦克黑狡黠的一笑。
“OK,成交了” 小白晃了晃手里的星巴克优惠券。
今天我们来写一个Promise对象
一。在这之前要确保你完全明白如何使用他的各个方法。如果还不清楚那么就去看下es6的文档,不然下面的内容可能会看不明白
二。你完全了解发布/订阅模式,这会然让你对后面的代码更容易理解,如果还不清楚就去看下我们上次的谈话 《教你如何用ES6发布/订阅模式约女朋友》”
“那么首先你来写一个最常用的Promise的使用方法”老麦克说到
“没问题”
“写的不错,那么我们就编写一段代码让这段代码能够正常的运行”。
首先我们编写一个Promise方法
在Promise方法里我定义了 两个数组 分别用来存放 成功时和失败时要执行的函数,你还记得发布订阅者模式吗?
this.status 用来存放执行状态。 this.value存放 返回的内容(不管成功与否)
接下来我们执行了 startResolve(this, fn); 方法。但现在我还不准备讲解他的实现方式。
我们先实现then方法
当我们调用then方法的时候首先会判断this.status的状态
- this.status =0 则 执行 addQueue
- this.status =1 则 执行 reject
- this.status =2 则 执行 reject
那么我们首先看下addQueue方法。
addQueue方法的实现
你看到了吗,开始push了,就像发布订阅模式一样。
resolve方法的实现
看下成功数组(resolves)里有没有函数,如果没有直接返回false ,如果有函数我们就把失败数组(rejects)的函数清除掉。修改status的状态为 1,也就是resolve 解析成功然后调用resolves 列表里的函数,也就是我们从then里的函数push进来的函数。
reject方法的实现
和resolve是一个道理,你懂的,不解释。
最后我们来看下startResolve都干了些什么。
startResolve() 方法的实现
看到了吧,延迟执行,在这里我们用setTimeout来实现延迟在实际的es6的promise对象中他使用的是 asap模块来实现的
var asap = require('asap/raw');
总结:
也就是说我们先执行了then方法,把then里的两个匿名函数push到了promise的成功函数数组(resolves)和失败函数数组里(rejects),然后在执行pormise里的函数等成功或者失败以后再调用then里提供的方法。懂了吗?
最后我们来看下完整的Promise代码实现。
到此我们的代码编写完毕,最开始的代码还记得吗?
在浏览器中运行一下来验证我们的代码是否成功!
“完美运行,非常棒,难怪您会先让我学习发布/订阅模式,非常感谢”小白向老麦克竖起了大拇指。
猜你喜欢
- 2024-10-27 前端面试大全:手写 Promise(前端手机端面试题)
- 2024-10-27 Javascript ES6中 Generator的?async/await Promise 了解一下?
- 2024-10-27 Promise 中 race 方法的目的是什么
- 2024-10-27 ES6 Promise对象(es6对象操作)
- 2024-10-27 ES6 Promise 的最佳实践(es6 promise作用)
- 2024-10-27 ES6学习(17):彻底搞懂 async 和 await,轻松掌握异步编程!
- 2024-10-27 JavaScript ES6 语法特性介绍(javascript的基本语法遵循的标准是____。)
- 2024-10-27 图解 Promise 实现原理(一):基础实现
- 2024-10-27 可视化的 js:动态图演示 Promises & Async/Await 的过程
- 2024-10-27 前端ES6中Promise原理之进阶篇(二)
你 发表评论:
欢迎- 06-23MySQL合集-mysql5.7及mysql8的一些特性
- 06-23MySQL CREATE TABLE 简单设计模板交流
- 06-23MYSQL表设计规范(mysql设计表注意事项)
- 06-23MySQL数据库入门(四)数据类型简介
- 06-23数据丢失?别慌!MySQL备份恢复攻略
- 06-23MySQL设计规范(mysql 设计)
- 06-23MySQL数据实时增量同步到Elasticsearch
- 06-23MySQL 避坑指南之隐式数据类型转换
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)