教你一步步实现一个简易promise

目录
  • step1 搭建框架
  • step2 填充搭建好了的Promise框架
  • 总结

step1 搭建框架

1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、reject的执行函数

  function Promise(execotor) {}

2. 原装promise中有then与catch这两个主要的方法，所以我们要给promise的原型挂载then与catch

  Promise.prototype.then = function (onResolved, onRejected) {}
  Promise.prototype.catch = function (onRejected) {}

3. 给promise挂载几个常见方法 resolve、reject、all、race等等

resolve：返回的是一个指定结果的promise对象

  Promise.resolve = function (value) { }

reject：返回失败状态的方法

  Promise.reject = function (value) { }

all：返回一个promise对象，只有当promise都返回的时候，这个状态才算成功

  Promise.all = function (value) { }

race：返回一个promise对象，它的状态是由第一个返回的对象确定的，这个race里面哪个函数先执行完，就直接返回第一个值，其他的继续执行

  Promise.race = function (value) { }

4. 全局声明mypromise

  window.Promise = Promise

5. 建立一个自执行函数 将上述内容全部包裹进去

(function (window) {

})()

step2 填充搭建好了的Promise框架

1.填充function Promise()

（1）let self = this固定一个function内部的this，这个this在后面会发挥很大作用

（2）self.status = 'pending'为Promise函数本体添加一个基础状态‘pending'

（3）self.data = undefined建立一个data源，用来存储resolve传回来的结果

（4）self.callbacks = []建立一个数组，用来将promise中的回调全部保存起来

2.填充function resolve()

（1）        if (self.status !== 'pending') {           return         }判断当前传入进程的状态是否为pending，是就继续下面的操作，不是就直接返回

promise内部有三种状态pending、resolved、rejected，这三种状态都是一种开关变量，如果该状态从pending转为其他状态后将无法改变。

（2）self.status = 'resolved'将该进程的状态改为resolved

（3）self.data = value将value存起来，待会then中的回调会需要使用该数据

（4）放上最重要的执行函数部分，如果sele.data中有待执行的callback函数，立即异步执行它

    if (self.callbacks.length > 0) {
      setTimeout(() => {
        self.callbacks.forEach(callbackObj => {
          callbackObj.onResolved(value)
        })
      }, 0)
    }

3.填充function reject()

（1） 与resolve函数相同，此处简略

4.填充execotor方法

promise主体在执行时如果出错，错误信息被catch捕捉，此时catch会跳至该函数来单独执行一个reject

     try {
       execotor(resolve, reject)
     } catch (error) {
       reject(error)
     }

5.填充.then函数

首先我们要区分传入进程的状态，如果是pending状态就把回调函数存起来，如果不是pending状态就干点什么它应该做的

（1）if (self.status === 'pending')如果当前的状态是pending的话，我们就把它保存起来

    self.callbacks.push({
      onResolved() { onResolved(self.data) },
      onRejected() { onRejected(self.data) }
    })

（2）else if (self.status === 'resolved')如果status的状态是resolved

我们就开开心心的给它执行一下

    setTimeout(() => {
      onResolved(self.data)
    }, 0)

可是有这么一种状态：resolve没有执行，但此时状态却已经改变了，我们就不能执行resolve而改为执行rejected

   else{
     setTimeout(() => {
       onRejecyed(self.data)
     }, 0)
   }

经过了如同怎么把大象塞进冰箱一样“简略”的两步，我们就实现了一个简易的Promise　　　　　　　　　　　　　　　　　　　　　　　　

是不是很简单呀，快叫上身边的小伙伴一起来试一试吧！

总结

到此这篇关于实现一个简易promise的文章就介绍到这了,更多相关实现简易promise内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈js promise看这篇足够了

    一.背景 大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入"回调监狱",就容易造成下边的例子: async(1, function(value){ async(value, function(value){ async(value, fu

  • JavaScript Promise 用法

    同步编程通常来说易于调试和维护,然而,异步编程通常能获得更好的性能和更大的灵活性.异步的最大特点是无需等待."Promises"渐渐成为JavaScript里最重要的一部分,大量的新API都开始promise原理实现.下面让我们看一下什么是promise,以及它的API和用法! Promises现状 XMLHttpRequest API是异步的,但它没有使用promise API.但有很多原生的 javascript API 使用了promise: *Battery API *fetc

  • JavaScript中的Promise使用详解

    JavaScript中的Promise使用详解

    许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures.JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口. 本文讲的是基于Promises/A 标准的JavaScript promises.[http://wiki.commonjs.org/wiki/Promises/A] Promise的用例: 执行规则 多个远程验证 超时处理 远程数据请求 动画 将事件逻辑从应用逻辑中解耦

  • 举例详解JavaScript中Promise的使用

    摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成有可能没完成.Promise模式唯一需要的一个接口是调用then方法,它可以用来注册当promise完成或者失败时调用的回调函数,这在Common

  • 理解JavaScript中Promise的使用

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验.于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题.本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解. 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的

  • Javascript Promise用法详解

    Javascript Promise用法详解

    1.约定 本文的 demo 代码有些是伪代码,不可以直接执行. 没有特殊说明,本文所有 demo 都是基于 ES6 规范. Object.method 代表是静态方法, Object#method 代表的是实例方法.如 Promise#then 代表的是 Promise 的实例方法, Promise.resolve 代表的是 Promise 的静态方法. 2.什么是 Promise? 首先我们来了解 Promise 到底是怎么一回事 Promise 是抽象的异步处理对象,以及对其进行各种操作的组

  • 教你一步步实现一个简易promise

    目录 step1 搭建框架 step2 填充搭建好了的Promise框架 总结 step1 搭建框架 1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve.reject的执行函数 function Promise(execotor) {} 2. 原装promise中有then与catch这两个主要的方法,所以我们要给promise的原型挂载then与catch Promise.prototype.then = function (onResolved, onRe

  • 教你使用Python实现一个简易版Web服务器

    目录 一.简介 二.Web服务器基础概念 三.Python网络编程库 四.实现简易Web服务器 1.使用socket库创建服务器套接字. 2.绑定服务器IP地址和端口. 3.监听客户端连接. 4.接受客户端连接并处理请求. 五.处理HTTP请求 六.返回静态文件 1.根据请求URL读取文件内容. 2.根据文件内容构建HTTP响应. 七.测试与优化 八.总结及拓展 九.补充:多线程处理客户端请求 一.修改处理客户端请求的函数 二.使用多线程处理客户端请求 三.完整的多线程Web服务器代码 一.简介

  • 教你利用Python+Turtle绘制简易版爱心表白

    教你利用Python+Turtle绘制简易版爱心表白

    一.效果 快放10倍 总共分为三部分,左上角的正文,下方的心形和右下角的署名 特别需要注意的一点是这种东西不但要装Python,还与分辨率有关(换个屏幕可能效果雪崩,因为用的是绝对坐标),因此并不建议实际拿去弄(哪怕能解决上述两个问题) 二.正文部分 效果: 本质是每写一行话,然后将坐标下移换行,再写一行,以此类推 # content就是该行的内容了,想些啥写啥吧 def drawLine(content, x, y, sleep=3): goto(x, y) write(content, fo

  • 教你用Java实现一个简单的代码生成器

    教你用Java实现一个简单的代码生成器

    前言 逆向工程从数据库表直接生成代码,是日常开发中常用的敏捷开发手段,常见的例如:mybatis-plus的代码生成器等 为什么要自己写代码生成器呢?MP的生成器不香吗?香! 但是自己写的工具用起来最顺手,可以随意扩展,想怎么玩就怎么玩,只要自己有想法,玩出花来都没问题,当然了,能力有限,现在还只能实现简单版本,更多骚操作自己发挥! 思路: 1.建立jdbc连接,执行查询sql,获取表结构信息. 2.在指定的路径上创建文件. 3.按照我们的布局排版要求,根据表结构信息拼接文件的内容. 4.将字符

  • 如何利用Java AWT 创建一个简易计算器

    如何利用Java AWT 创建一个简易计算器

    目录 一.关于AWT 二.逻辑部分 1.对于数字按钮 2.对于算术按钮 3.对于等号按钮 4.对于清除按钮 5.对于退格按钮 6.特殊插件功能 7.==例如==: 三.GIF演示 四.附完整代码 摘要:手把手教你使用 Java AWT 创建一个简易计算器. 一.关于AWT AWT (抽象窗口工具包)是一个有助于构建 GUI 的 API (图形用户界面)基于 java 应用程序.GUI使用一些图形帮助用户交互.它主要由一组的类和方法所必需的,如在一个简化的方式创建和管理的GUI按钮,窗口,框架,文

  • VUE 实现一个简易老虎机的项目实践

    VUE 实现一个简易老虎机的项目实践

    目录 简单分析下 先看看效果 html js部分 总结 今天突然要做一个竖直滚动老虎机,可以设置中奖位置,以及中奖回调,然后再带点常规的滚动动画,还是有点意思,和之前的转盘抽奖有点类似,有兴趣可以看下. 简单分析下 UI,ui的话,就简单点,三个列表从下往上滚动,搞个框罩住 css的活,应该简单. 动画,老规矩,我们采用之前的方案,动态设置 css,可以搞定. 设置中奖位置,我们可以想传递一个数组,类似 [1,2,3] 这样,数组每一项代表停留位置,那我们就可以计算得css应该平移的距离值,至于

  • JavaScript编写一个简易购物车功能

    JavaScript编写一个简易购物车功能

    网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

  • vue + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码

    AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍 首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好地扩展.Web层依赖应用服务接口,并且使

  • 基于python的Tkinter实现一个简易计算器

    基于python的Tkinter实现一个简易计算器

    本文实例介绍了基于python的Tkinter实现简易计算器的详细代码,分享给大家供大家参考,具体内容如下 第一种:使用python 的 Tkinter实现一个简易计算器 #coding:utf-8 from Tkinter import * import time root = Tk() def cacl(input_str): if "x" in input_str: ret = input_str.split("x") return int(ret[0]) *

随机推荐