一、Promise源码实现
- 定义初始类型
// 三种状态类型
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
// 新建两个数组, 来分别存储成功和失败的回调, 调用then的时候, 如果还是pending就存入数组.
FULFILLED_CALLBACK_LIST = [];
REJECTED_CALLBACK_LIST = [];
_status = PENDING;
- 设置初始状态
// 入参是一个函数, 函数接收resolve和reject两个参数.
constructor(fn) {
// 设置初始状态为pending
this.status = PENDING;
this.value = null;
this.reason = null;
// 在初始化promise的时候, 就要同步执行这个函数, 并且有任何报错都要通过reject抛出去
try {
// 将resolve、reject的this指向当前执行环境
fn(this.resolve.bind(this), this.reject.bind(this));
} catch (e) {
this.reject(e);
}
}
- 监听状态变化
get status() {
return this._status;
}
// 在status发生变化的时候, 就执行所有的回调
set status(newStatus) {
this._status = newStatus;
switch (newStatus) {
case FULFILLED: {
this.FULFILLED_CALLBACK_LIST.forEach(callback => {
callback(this.value);
});
break;
}
case REJECTED: {
this.REJECTED_CALLBACK_LIST.forEach(callback => {
callback(this.reason);
});
break;
}
}
}
- resolve 和 reject 方法，这两个方法是要更改status的, 入参分别是value 和 reason. 从pending改到fulfilled/rejected.
resolve(value) {
if (this.status === PENDING) {
this.value = value;
this.status = FULFILLED;
}
}
reject(reason) {
if (this.status === PENDING) {
this.reason = reason;
this.status = REJECTED;
}
}
- 定义then方法
// then接收两个参数, onFulfilled 和 onRejected
then(onFulfilled, onRejected) {
// 检查并处理参数, 之前提到的如果不是function, 就原样返回value或者reason.
const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
return value;
}
const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
throw reason;
};
// 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
// onFulfilled 和 onRejected 是微任务，咱们可以用queueMicrotask包裹执行函数
queueMicrotask(() => {
try {
if (!this.isFunction(onFulfilled)) {
resolve(this.value);
} else {
// 如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行resolvePromise方法
const x = fulFilledFn(this.value);
this.resolvePromise(newPromise, x, resolve, reject);
}
// onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e。
} catch (e) {
reject(e)
}
})
};
// 如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因。
// 如果promise1的onRejected执行成功了，promise2应该被resolve
const rejectedFnWithCatch = (resolve, reject, newPromise) => {
queueMicrotask(() => {
try {
if (!this.isFunction(onRejected)) {
reject(this.reason);
} else {
const x = rejectedFn(this.reason);
this.resolvePromise(newPromise, x, resolve, reject);
}
} catch (e) {
reject(e);
}
})
}
// 根据当前promise的状态, 调用不同的函数，then的返回值是一个promise
switch (this.status) {
case FULFILLED: {
const newPromise = new MPromise((resolve, reject) => fulFilledFnWithCatch(resolve, reject, newPromise));
return newPromise;
}
case REJECTED: {
const newPromise = new MPromise((resolve, reject) => rejectedFnWithCatch(resolve, reject, newPromise));
return newPromise;
}
case PENDING: {
const newPromise = new MPromise((resolve, reject) => {
this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject, newPromise));
this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject, newPromise));
});
return newPromise;
}
}
}
- 实现resolvePromise
resolvePromise(newPromise, x, resolve, reject) {
// 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
// 这是为了防止死循环
if (newPromise === x) {
return reject(new TypeError('The promise and the return value are the same'));
}
if (x instanceof MPromise) {
// 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
// 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
x.then((y) => {
this.resolvePromise(newPromise, y, resolve, reject);
}, reject);
} else if (typeof x === 'object' || this.isFunction(x)) {
// 如果 x 为对象或者函数
if (x === null) {
// null也会被判断为对象
return resolve(x);
}
let then = null;
try {
// 把 x.then 赋值给 then
then = x.then;
} catch (error) {
// 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
return reject(error);
}
// 如果 then 是函数
if (this.isFunction(then)) {
let called = false;
// 将 x 作为函数的作用域 this 调用
// 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
try {
then.call(
x,
// 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
(y) => {
// 需要有一个变量called来保证只调用一次.
if (called) return;
called = true;
this.resolvePromise(newPromise, y, resolve, reject);
},
// 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
(r) => {
if (called) return;
called = true;
reject(r);
});
} catch (error) {
// 如果调用 then 方法抛出了异常 e：
if (called) return;
// 否则以 e 为据因拒绝 promise
reject(error);
}
} else {
// 如果 then 不是函数，以 x 为参数执行 promise
resolve(x);
}
} else {
// 如果 x 不为对象或者函数，以 x 为参数执行 promise
resolve(x);
}
}
- 其他方法定义
// catch方法，使得可以调用.catch
catch (onRejected) {
return this.then(null, onRejected);
}
isFunction(param) {
return typeof param === 'function';
}
- 静态方法实现
// 将现有对象转为Promise对象
static resolve(value) {
if (value instanceof MPromise) {
return value;
}
// 如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。
return new MPromise((resolve) => {
resolve(value);
});
}
static reject(reason) {
// 返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason，会被传递给实例的回调函数。
return new MPromise((resolve, reject) => {
reject(reason);
});
}
`const p = Promise.race([p1, p2, p3]);`
// 该方法是将多个 Promise 实例，包装成一个新的 Promise 实例。
// 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
static race(promiseList) {
return new MPromise((resolve, reject) => {
const length = promiseList.length;
if (length === 0) {
return resolve();
} else {
for (let i = 0; i < length; i++) {
MPromise.resolve(promiseList[i]).then(
(value) => {
return resolve(value);
},
(reason) => {
return reject(reason);
});
}
}
});
}
- 测试代码
const test = new MPromise((resolve, reject) => {
setTimeout(() => {
resolve(111);
}, 1000);
}).then(console.log); // 111
console.log(test);
// MPromise {
// FULFILLED_CALLBACK_LIST: [],
// REJECTED_CALLBACK_LIST: [],
// _status: 'pending',
// value: null,
// reason: null
// }
setTimeout(() => {
console.log(test);
// MPromise {
// FULFILLED_CALLBACK_LIST: [],
// REJECTED_CALLBACK_LIST: [],
// _status: 'fulfilled',
// value: undefined,
// reason: null
// }
}, 2000)
二、迭代器和生成器
迭代器Iterator
迭代器Iterator 是 ES6 引入的一种新的遍历机制，同时也是一种特殊对象，它具有一些专门为迭代过程设计的专有接口。
每个迭代器对象都有一个next()方法，每次调用都返回一个当前结果对象。当前结果对象中有两个属性：
- value：当前属性的值
- done：用于判断是否遍历结束，当没有更多可返回的数据时，返回true
每调用一次next()方法，都会返回下一个可用的值，直到遍历结束。
生成器generator
生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格.
- 每当执行完一条yield语句后函数就会自动停止执行, 直到再次调用next();
- yield关键字只可在生成器内部使用，在其他地方使用会导致程序抛出错误;
- 可以通过函数表达式来创建生成器, 但是不能使用箭头函数
let generator = function *(){}
function* generator() {
const list = [1, 2, 3];
for (let i of list) {
yield i;
}
}
let g = generator();
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}
三、利用Async封装一个函数, 能够让generator自动执行到完毕
function longTimeFn(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(time);
}, time);
})
};
function asyncFunc(generator) {
const iterator = generator(); // 接下来要执行next
// data为第一次执行之后的返回结果，用于传给第二次执行
const next = (data) => {
const {
value,
done
} = iterator.next(data); // 第二次执行，并接收第一次的请求结果 value 和 done
if (done) return; // 执行完毕, 直接返回
// 第一次执行next时，yield返回的 promise实例 赋值给了 value
value.then(data => {
next(data); // 当第一次value 执行完毕且成功时，执行下一步(并把第一次的结果传递下一步)
});
}
next();
};
asyncFunc(function* () {
let data = yield longTimeFn(1000);
console.log(data);
data = yield longTimeFn(2000);
console.log(data);
return data;
})
