手把手带你实现ES6 Promise原理(使用Es6部分语法编写)

手把手带你实现ES6 Promise原理(使用Es6部分语法编写)

一、前言

使用Promise已经很长时间了，但是一直只是停留在应用的层面，底层的实现方式一直没有深究，感觉学一个东西还是知道底层原理比较好，于是好好研究后在此记录一下

二、什么是Promise?

Promise是一种异步编程的解决方案，避免了"回调地狱"，最早是由社区提出并实现，ES6后面将其写入语言标准。

Promise的两个特点

1. 对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2. 一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

三、Promise基本用法

Promise对象是一个构造函数，用来生成Promise实例

let promise = new Promise((resolve, reject) => {
   
    if(/* 异步操作成功 */) {
   
    	reslove(value);   
    } else {
   
    	reject(err);                      
    }
})

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

之后更多的使用方法可以参考这里

四、手写Promise

在手写之前请确保已经了解Promise的基本用法， 并且我们这次只实现Promise的then方法，其余的all, race, fianlly方法大家可以举一反三，用自己的想法实现

首先我们知道每个Promise内部有三个状态(pending, fulfilled, rejected)，因此我们先定义储存状态的变量 status并将其初始化为pending

class Promise {
   
	// 接收一个函数作为参数
	constructor(excutor) {
   
		this.status = 'pending';
	}
}

其次我们定义一下改变status状态的函数reslove和reject以及传入的参数value和reseaon

class Promise {
   
	// 接收一个函数作为参数
	constructor(excutor) {
   
		this.status = 'pending';
        this.value = null;
        this.reason = null;
        this.resolve = value => {
      // 使用箭头函数防止this指向改变
            if(this.status == 'pending') {
   
                this.value = value;
                this.status = 'fulfilled';
            }
        }
        this.reject = reason => {
   
            if(this.status == 'pending') {
   
                this.reason = reason;
                this.status = 'rejected';
            }
		}
    }
}

定义相关的变量以及函数将其作为参数传入函数

class Promise {
   
	// 接收一个函数作为参数
	constructor(excutor) {
   
		this.status = 'pending';
        this.value = null;
        this.reason = null;
        this.resolve = value => {
      // 使用箭头函数防止this指向改变
            if(this.status == 'pending') {
   
                this.value = value;
                this.status = 'fulfilled';
            }
        }
        this.reject = reason => {
   
            if(this.status == 'pending') {
   
                this.reason = reason;
                this.status = 'rejected';
            }
        }
        try {
   
            excutor(this.resolve, this.reject);
        } catch(err) {
   
            this.reject(err);
    }
}

然后开始写Promise的then方法, Promise收一个函数作为参数，该函数有两个参数，一个是resolve，表示成功时执行的函数，一个是reject，表示失败失败时执行的函数。resolve执行时传入的参数会作为then方法中第一个回调函数的参数，reject执行传入的参数会作为then方法中第二函数回调的参数。

class Promise {
   
	// 接收一个函数作为参数
	constructor(excutor) {
   
		this.status = 'pending';
        this.value