手写Promise（一）

思路梳理

1、promise是一个类，执行该类的时候，需要传递一个执行器

class MyPromise {
	construntor(executor) {
		executor();
	}
}

2、promise有三种状态：pending（执行中）、fulfilled（执行成功）、rejected（执行失败）

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
	status = PENDING; // 实例属性status，初始值pending
	construntor(executor) {
		executor();
	}
}

3、resolve和reject是更改状态的，且状态只能由pending->fulfilled，pending->rejected两种

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
	status = PENDING; // 实例属性status，初始值pending
	construntor(executor) {
		executor(this.resolve, this.reject);
	}
	resolve = () => {
		if (this.status !== PENDING) return;
		this.status = FULFILLED;
	}
	reject = () => {
		if (this.status !== PENDING) return;
		this.status = REJECTED;
	}
}

4、then方法，判断其状态，根据状态不同，执行不同的回调函数

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
	status = PENDING; // 实例属性status，初始值pending
	construntor(executor) {
		executor(this.resolve, this.reject);
	}
	resolve = () => {
		if (this.status !== PENDING) return;
		this.status = FULFILLED;
	}
	reject = () => {
		if (this.status !== PENDING) return;
		this.status = REJECTED;
	}
	// start step 4
	then = (successCallback, failCallback) => {
		if (this.status === FULFILLED) {
			successCallback();
		} else if (this.status === REJECTED) {
			failCallback()
		}
	}
	// end step 4
}

5、then方法执行回调函数，成功时，需要返回成功的值；失败时，需要返回失败原因

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
	status = PENDING; // 实例属性status，初始值pending
	// start step 5
	value = undefined;	// 状态成功时，保存成功的值
	reason = undefined; // 状态失败时，保存失败的原因
	// end step 5
	
	construntor(executor) {
		executor(this.resolve, this.reject);
	}
	resolve = value => { // step 5 value
		if (this.status !== PENDING) return;
		this.status = FULFILLED;
		// start step 5
		this.value = value;
		// end step 5
	}
	reject = reason => { // step 5 reason
		if (this.status !== PENDING) return;
		this.status = REJECTED;
		// start step 5
		this.reason = reason;
		// end step 5
	}
	then = (successCallback, failCallback) => {
		if (this.status === FULFILLED) {
			successCallback(this.value); // step 5 successCallback() -> successCallback(this.value)
		} else if (this.status === REJECTED) {
			failCallback(this.reason); // step 5 failCallback() -> failCallback(this.reason)
		}
	}
}

6、关于resove和reject异步的情况
下述情况中，执行器中加入了延时函数，由于js时按顺序执行，在遇到setTimeout时，并不会等待其执行，所以在执行then方法时，得到的状态仍为pending

const promise = new MyPromise((resolve, reject) => {
	setTimeout(() => {
		resolve('success');
		// reject('fail');
	}, 3000);
})

promise.then(value => {
	console.log(value)
})

故，需要考虑then方法中，状态为pending时，需要存储成功回调和失败回调

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
	status = PENDING; // 实例属性status，初始值pending
	value = undefined;	// 状态成功时，保存成功的值
	reason = undefined; // 状态失败时，保存失败的原因
	// start step 6
	successCallback = undefined; // 保存成功回调
	failCallback = undefined;	// 保存失败回调
	// end step 6

	construntor(executor) {
		executor(this.resolve, this.reject);
	}
	resolve = value => {
		if (this.status !== PENDING) return;
		this.status = FULFILLED;
		this.value = value;
		// start step 6
		this.successCallback && this.successCallback(this.value);
		// end step 6
	}
	reject = reason => {
		if (this.status !== PENDING) return;
		this.status = REJECTED;
		this.reason = reason;
		// start step 6
		this.failCallback && this.failCallback(this.value);
		// end step 6
	}
	then = (successCallback, failCallback) => {
		if (this.status === FULFILLED) {
			successCallback(this.value);
		} else if (this.status === REJECTED) {
			failCallback(this.reason);
		} else { // start step 6
			this.successCallback = successCallback;
			this.failCallback = failCallback;
		} // end step 6
	}
}