ES6-手写Promise类逻辑实现

在这里插入图片描述

前言
在ES6中的promise想必大家都会用,我想问一下,大家有没有考虑过promise是怎么实现的?

所以呢,在本篇文章中主要是给大家介绍一下promise类核心逻辑实现,希望可以帮助到大家
promise的特点
先介绍一下promise的特点

 1. promise本质上就是一个类, 在执行这个类的时候,需要传递一个执行器进去,这个执行器会立即执行
  
 2. Promise 中有三个状态分别为,成功:fulfilled 失败:rejected 等待:pending
 
    pending => fulfilled 
    
    pending => rejected 
    
    要么是pending 变成fulfilled, 要么是pending 变成rejected 一旦状态确定就不可以更改
    
 3. resolve函数和reject函数是用来更改状态的
 
 4. then方法内部做的事情就是判断状态,如果是状态是成功,就调用成功的回调函数,如果状态是失败,就调用失败的回调函数
 
 5. 每个promise对象都可以调用then方法,也就是说then方法是原型对象上的方法
 
 6. then成功回调有一个参数表示成功之后的值,then失败回调有一个参数表示失败的原因

代码演示
//设置promise 状态
const PENDING = "pending"; //等待状态

const FULFILLED = 'FULFILLED'; //成功状态

const REJECTED = 'rejected'; //失败状态

class MyPromise {

    constructor(executor) {
            //立即调用函数
            executor(this.resolve, this.reject)
        }
        //初始化状态
    status = PENDING
        //初始化成功之后的值
    success = undefined
        //初始化失败之后的值
    error = undefined
    resolve = success => {
        //如果状态不是等待 则阻止程序执行
        if (this.status !== PENDING) return
            //把promise状态改为成功
        this.status = FULFILLED
            //保存成功之后的值
        this.success = success
    }
    reject = error => {
        //如果状态不是等待 则阻止程序执行
        if (this.status !== PENDING) return
            //把promise状态改为失败
        this.status = REJECTED
            //保存失败之后的值
        this.error = error
    }
    then(successCallback, failCallback) {
        //逻辑判断如果当前状态为成功 则执行成功的回调并且把保存成功的值传递进去
        if (this.status === FULFILLED) {
            successCallback(this.success);
            //逻辑判断如果当前状态为成功 则执行失败的回调并且把失败的原因传递进去
        } else if (this.status === REJECTED) {
            failCallback(this.error)
        }
    }
}
//遵循commjs规范 导出
module.exports = MyPromise;
使用自己定义的promise
let MyPromise = require('./手写promise-1');

let promise = new MyPromise((resolve, reject) => {
    resolve('success');
    reject('error');
});

promise.then(res => {
    console.log(res); //success
}, reject => {
    console.log(reject);
})

这里只是最基本promise实现,并不涉及一些ES6中promise的一些api

例如Promise.all、Promise.race,这些API会在后面的文章中介绍

谢谢观看,如有不足,敬请指教

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值