手写Promise,1.1promise原理

手写promise,他的原理实现基于promise特征而来,实现比较复杂,需要一步一步来,由简而繁。
首先需要知道promise的特征有哪些。

let promise = new Promise((resolve,reject)=>{
    resolve('success');
    // reject("failed");
})
promise.then((value)=>{},(reason)=>{});

一个最简单的使用方法,new关键字开头,说明promise是一个类,在类执行的时候需要传递一个执行器,并且会立即执行,他有两个参数,一个resovle,一个reject。其实是两个函数。
Promise有三种状态,fulfilled(成功),rejected(失败)和pending(等待)。由pending->fulfilled或者是pending->rejected。状态一旦确定便不能改变,resovlereject就是用来改变状态的。
promise里面有个then方法,它定义在原型对象中。用来判断状态,成功就执行成功之后该做的事情,失败就执行失败之后做的事情,并且有参数来表示成功之后的值或者失败原因
所以Promise至少有如下四种特点

  1. Promise就是一个类,在执行这个类的时候,需要传递一个执行器进去,执行器会立即执行
  2. Promise 中有三种状态,一旦状态确定便不可更改
  3. resovlereject函数是用来更改状态的
  4. then方法内部做的事情就判断状态,如果状态是成功,调用成功的回调函数,如果状态是失败,调用失败回调函数,then方法是被定义在原型对象中的
  5. then的成功回调有一个参数表示成功之后的值,then失败回调有一个参数表示失败后的原因

根据上面的特点,实现代码如下:

// 定义三个状态
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject);
    }
    // 定义一个表示状态的变量
    status = PENDING;
    // 定义两个实例属性,表示成功之后的值和失败后的原因
    value = undefined;
    reason = undefined;

    // 两个属性,这里定义成箭头函数,是因为我们在使用的时候是直接调用,
    // 而普通函数内部this的指向window或者是undefined,定义成箭头函数使函数内部this指向指向类实例对象
    resolve = value => {
        // 如果状态不是等待,阻止程序向下进行
        if (this.status !== PENDING) return
        // 更改状态为成功
        this.status = FULFILLED
        // 保存成功的值
        this.value = value;
    }
    reject = reason => {
        // 如果状态不是等待,阻止程序向下进行 
        if (this.status !== PENDING) return
        // 更改状态为失败
        this.status = REJECTED
        // 保存失败的原因
        this.reason = reason;
    }

    then(successCallback, failedCallback) {
        // 状态判断
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failedCallback(this.reason)
        }
    }
}

module.exports = MyPromise;

测试代码:

const MyPromise = require('./mypromise');

let promise = new MyPromise((resolve, reject) => {
    // resolve('---success----');
    reject("---failed----");
})
promise.then(value => {
    console.log(value);
}, reason => {
    console.log(reason)
})

测试成功。

你可能感兴趣的:(javascript前端es6)