手写Promise
let Promise = require('./myPromise'); //导入自己实现的类
【1】简单resolve() reject() throw new Error(‘error’)
// 构造函数中核心步骤
try {
executorCallback(resolve, reject);
} catch (e) {
//executorCallback执行发生异常，当前状态设置
console.log('捕捉异常');
reject(e);
}
//更新状态
function resolve(value) {
if (_this.status === 'pending') {
_this.status = 'resolved'; //成功状态
_this.value = value;
};
};
function reject(reason) {
if (_this.status === 'pending') {
_this.status = 'rejected'; //失败状态
_this.reason = reason;
};
};
//成员方法
//实例方法then
then(onFufilled, onRejected) {
if (this.status === 'resolved') {
onFufilled(this.value);
}
if (this.status === 'rejected') {
onRejected(this.reason);
}
};
【2】构造函数中延迟问题
//箭头函数：不存在this
let p1 = new Promise((resolve, reject) => {
//resolve(2);
// reject(1); //当前所处环境为默认this
// throw new Error('error');
//setTimeout(resolve(2), 1000);
setTimeout(() => {
resolve(2);
}, 1000);
});
=================
需要设置对应的resolve、reject
// 状态设置：只能从默认状态转为 rejected、resolved状态
function resolve(value) {
if (_this.status === 'pending') {
_this.status = 'resolved'; //成功状态
_this.value = value;
_this.onResolvedCallbacks.forEach(element => element(value));
};
};
function reject(reason) {
if (_this.status === 'pending') {
_this.status = 'rejected'; //失败状态
_this.reason = reason;
_this.onRejectedCallbacks.forEach(element => element(reason));
};
};
//同时，处理then方法
//实例方法then
then(onFufilled, onRejected) {
if (this.status === 'resolved') {
onFufilled(this.value);
}
if (this.status === 'rejected') {
onRejected(this.reason);
}
//then异步方法
if (this.status === 'pending') {
this.onResolvedCallbacks.push(onFufilled);
this.onRejectedCallbacks.push(onRejected);
}
};
【3】实现promise的链式调用
核心代码：
//假定只存在这种情况
if (typeof then === 'function') {
then.call(
x,
function(y) {
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
},
function(error) {
if (called) return;
called = true;
reject(error);
});
}
promise 中异步体现在：
let p1 = new Promise((resolve, reject) => {
reject(3); // 与resolve()方法互斥，只能执行一个
resolve(3); //不是异步方法
});
//异步方法
p1.then(result => {
console.log(1);
}, reason => {
console.log(2);
});
console.log(4);
//执行输出4 然后才是then() ——体现异步！
//箭头函数内部是没有this，取得是所处环境得this
flex属性：设置
flex-grow,flex-shrink与flex-basis
flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。
flex-shrink属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis指定了 flex 元素在主轴方向上的初始大小。
