乐趣区

关于javascript:手写Promise11promise原理

jiezi

手写 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。状态一旦确定便不能扭转，resovle 和reject就是用来扭转状态的。
promise 外面有个 then 办法，它定义在原型对象中。用来判断状态，胜利就执行胜利之后该做的事件，失败就执行失败之后做的事件, 并且有参数来示意胜利之后的值或者失败起因
所以 Promise 至多有如下四种特点

  1. Promise就是一个类，在执行这个类的时候，须要传递一个执行器进去，执行器会立刻执行
  2. Promise 中有三种状态，一旦状态确定便不可更改
  3. resovle和 reject 函数是用来更改状态的
  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)
})

测试胜利。

退出移动版