手写promise进阶版本

promise/A+规范:

  术语:

  1、promise是一个对象或者函数,该对象或者函数有一个then方法

  2、thenable是一个函数或者对象,用来定义then方法

  3、value是promise成功时的状态值

  4、reason是promise失败时的状态值

    

  要求:一、二

一、

  1、三种状态 :pending | fulfilled(resolved) | rejected 

  2、rejected当处于pending状态的时候,可以转移到fulfilled(resolved)或者rejected状态 

  3、当处于fulfilled(resolved)状态或者rejected状态的时候,就不可变。  

二、

  1、一个promise必须有一个then方法,then方法接受两个参数并且必须返回一个promise

  

// onFulfilled 用来接收promise成功的值
// onRejected 用来接收promise失败的原因
promise1=promise.then(onFulfilled, onRejected);

三、

  简单的写一下promise的基本用法:

  

var promise = new Promise((resolve,reject)=>{
let a =1;b=2
if(a<b){
resolve(a)
} else{
reject(b)
}
})
promise.then(function(value){
console.log(value)
},function(error){
console.log(error)
})

  接着来实现promise的过程,不多说直接贴代码

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    function resolve(value){
        //两个==="pending",保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //两个==="pending",保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}

  同时,需要在myPromise的原型上定义链式调用的then方法:

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:
   }
}

  那么我们来测试一下结果:

  

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1

 今天就写个进阶版的promise 喜欢更高难度的可以参考链接让我们共同进步吧

  

  引荐链接 :实现一个完美符合Promise/A+规范的Promise

原文地址:https://www.cnblogs.com/wuconghui/p/10980917.html

时间: 2024-08-02 08:06:16

手写promise进阶版本的相关文章

js手写&#39;Promise&#39;

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.

手写Promise A+ 规范

基于ES6语法手写promise A+ 规范,源码实现 class Promise { constructor(excutorCallBack) { this.status = 'pending'; this.value = undefined; this.fulfilledAry = []; this.rejectedAry = []; //=>执行EXCUTOR(异常捕获) let resolveFn = result => { let timer = setTimeout(() =>

手写 Promise

在上一章节中我们了解了 Promise 的一些易错点,在这一章节中,我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它,并且手写 Promise 也是一道大厂常考题,在进入正题之前,推荐各位阅读一下 Promise/A+ 规范,这样才能更好地理解这个章节的代码. 实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. 那

手写promise

写在前面: 在目前的前端分开中,我们对于异步方法的使用越来越频繁,那么如果处理异步方法的返回结果,如果优雅的进行异步处理对于一个合格的前端开发者而言就显得尤为重要,其中在面试中被问道最多的就是对Promise方法的掌握情况,本章将和大家一起分析和完成一个Promise方法,希望对你的学习有一定的帮助. 了解Promise 既然我们是要模仿ES6的Promise,那我们必然要知道这个方法主要都是用来干什么的,有哪些参数,有什么特性,为什么要使用Promise及如何使用等等. 为什么要使用它? 1.

77、tensorflow手写识别基础版本

''' Created on 2017年4月20日 @author: weizhen ''' #手写识别 from tensorflow.examples.tutorials.mnist import input_data mnist=input_data.read_data_sets("/path/to/MNIST_data/",one_hot=True) batch_size=100 xs,ys = mnist.train.next_batch(batch_size) #从trai

[webpack]手写一个mvp版本的webpack

let fs = require('fs'); let path = require('path'); let babylon = require('babylon'); // Babylon 把源码转换为AST let t = require('@babel/types'); // @babel-types 替换节点 let traverse = require('@babel/traverse').default; // @babel-traverse 遍历节点 let generator

【前端面试】同学,你会手写代码吗?

CSS 部分 两栏布局 要求:垂直两栏,左边固定右边自适应. 查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

手写MyBatis ORM框架实践

一.实现手写Mybatis三个难点 1.接口既然不能被实例化?那么我们是怎么实现能够调用的? 2.参数如何和sql绑定 3.返回结果 下面是Mybatis接口 二.Demo实现 1.创建Maven工程(开发工具Eclipse) 下一步 下一步 然后点击“完成” 2.配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema

win10下通过Anaconda安装TensorFlow-GPU1.3版本,并配置pycharm运行Mnist手写识别程序

折腾了一天半终于装好了win10下的TensorFlow-GPU版,在这里做个记录. 准备安装包: visual studio 2015: Anaconda3-4.2.0-Windows-x86_64: pycharm-community: CUDA:cuda_8.0.61_win10:下载时选择 exe(local) CUDA补丁:cuda_8.0.61.2_windows: cuDNN:cudnn-8.0-windows10-x64-v6.0;如果你安装的TensorFlow版本和我一样1.