promise的术语
- promise 是一个有then方法的对象或者是函数，行为遵循本规范
- thenable 是一个有then 方法的对象或者是函数
- value是promise 状态成功时候的值，也就是resolve的参数，表示结果的数据
- reason是promise 状态失败时候的值，也就是reject的参数，表示拒绝的原因
- exception是一个使用throw抛出的异常值 。
promise的使用
异步的逻辑
为什么有微任务？
调用栈并发量大的时候，微任务可以解决异步时机不可控的问题
典型的异步
- 事件回调
- Ajax请求
- Node API
- setTimeout等
function foo() {
setTimeout(() => {
console.log("foo");
//假如，把这个foo字符串看成一个复杂计算的结果
fn("foo")
}, 5000)
}
foo((res) => {
console.log(`I've got ${res}`)
})
<script>代码块算宏任务嘛？
需要自己去理解下主线程，宏任务，微任务？其实面试单纯的问这个的话，有点转牛角尖，没必要。理解好宏任务，微任务，event loop就可以啦（个人感受）
第二个例子:
vue性能比react好，这个要看如何定义性能，在那些方面，是那些指标，一些指标下，react是优于vue的，框架间没有那么绝对。
回调地狱
fs.readFile('a.text','utf-8',function(err,data) {
fs.readFile('b.text','utf-8',function(err,data) {
fs.readFile('c.text','utf-8',function(err,data) {
})
})
})
promise的实现
初探 promise
const handler = (resolve, reject) =>{
setTimeout(() => {
resolve([3,4,5]);
reject([1,2,3]);
}, 1000)
}
function getSomeThing(url) {
return new Promise(handler)
}
let promise1 = getSomeThing('/api/v1/user/role');
promise1.then((res) =< {
console.log(`the result is ${res}`);
}, (error) => {
console.log(`the reason is ${error}`);
})
通过上面的结构我们可以发现:
-
Promise 是一个构造函数；
-
Promise接收一个函数作为promise的参数，这个函数本身的参数有两个，resolve和reject ，同时要求这两个也是函数；
-
Promise返回的对象，包含一个then函数，then函数接收两个函数，这两个参数，一般也是函数；
-
我们在使用new关键字调用Promise构造函数时，在结束时候:
如果正确执行，调用resolve方法，将结果放在resolve的参数中执行，这个结果可以在后面的then中的第一个函数参数（onFulfilled）中拿到； 如果错误执行，调用reject方法，将错误信息放在reject的参数中执行，这个结果可以再后面的then的第二个参数(onRejected)中拿到；
上面的总结中的第四点是最重要的，同时也是我们在日常中最多用到的地方，如接口请求的结果处理，都是在then中，比如res是正确执行的结果，这个时候，我们的结果res就是当做参数放在了resolve函数中，这里一定要理解清楚，不然无法进行后续的手写promise相关；
接下来我们再进一步，对于promise的状态进行探究，promiseA+规范中规定有
[rule--]
promise的状态
pending
- 初始的状态，可改变
- 一个 promise 在
resolve/reject前都处于这个状态 - 我们可以通过调用
resolve方法或reject方法，让这个 promise , 变成fulfilled/rejected状态；
fulfilled
- 不可变状态
- 在 resolve 被调用之后，变成这个状态，并且拥有一个 value
rejected
- 不可变状态
- 在 reject 被调用之后，变成这个状态，并拥有一个 reason
在有了状态之后，我们需要来了解一下
then函数
- 参数：
onFulfilled必须是函数类型，如果不是，应该被忽略；
onRejected必须是函数类型，如果不是，应该被忽略； -
onFulfilled/onRejected的特性
- 在promise变成 fulfilled / rejected 状态的时候，应该调用 onFulfilled / onRejected;
- 在promise变成 fulfilled / rejected 状态之前，onFulfilled / onRejected不应该切无法被调用;
- 由于promise状态一旦改变，就不再可以改变，那代表着 onFulfilled / onRejected 只能被调用一次；
[--rule]
这时，我们基于以上规则或者这限制条件，先写一个L0版本的promise
function L0Promise(execute) {
this.status = 'pending' // promise的初始状态
this.value = null; //用来存放resolve之后拥有的值
this.reason = null; //用来存放后续reject的error信息
//接下来需要定义两个函数,resolve/reject 他们可以让promise从pending变为fulfilled或者rejected状态；
const resolve = (value) => {
// 需要判断控制正确的状态流向是 pending => fulfilled
if(this.status === 'pending') {
this.value = value;
this.status = 'fulfilled'
}
};
const reject = (reason) => {
// 需要判断控制正确的状态流向是 pending => rejected
if(this.status === 'pending') {
this.reason = reason;
this.status = 'rejected'
}
};
execute(resolve, reject);
}
// 注意上面我们只是完成了部分promise的工作，对于then，需要从原型链上定义
L0Promise.prototype.then = function(onfulfilled,onrejected) {
//这里为啥要做这个就是对应我们要对他两类型做校验,必须是函数
onfulfilled = typeof onfulfilled === 'function'
? onfulfilled : data => data;
onrejected = typeof onrejected === 'function'
? onrejected : error => {throw error};
// 对应promise的status变之前，不该且无法被调用，
if(this.status === 'fulfilled) {
onfulfilled(this.value);
}
if(this.status === 'rejected) {
onfulfilled(this.reason);
}
}
其实对于以上第一个版本，对照promiseA+规范很容易写完，但是问题来了，这里的部门你可以发现是没有异步的，又或者说，我们写一个特殊的例子来试一下
let promise = new L0Promise((resolve, reject) => {
setTimeout(() => {
resolve('data')
}, 1000)
})
promise.then((data) => {
console.log(data)
})
当把这段代码运行的时候你会发现不生效了，这里的问题在于，当我resolve执行的时候，他是异步的，一秒后才执行，可是这个时候，onfulfilled函数已经执行过了，这就和我们的规范当中说法冲突了，那说明我们的代码中有漏洞，需要一个机制去控制resolve和onfulfilled执行顺序，必须得等resolve执行完成后，通知onfulfilled去执行所以我们这里应该用发布订阅模式，onfulfilled订阅resolve，当resolve完成后，发布给订阅他的onfulfilled，同时规范中定义onfulfilled和onrejected 应该是微任务，我们这里暂时用setTimeout代替，ok，那我们来对L0进行完善
function L1Promise(execute) {
this.status = 'pending';
this.value = null;
this.reason = null;
// 思考一下，这两个数组的作用有哪些？
this.onFulfilledArray = [];
this.onRejectedArray = [];
const resolve = (value) => {
setTimeout(() => {
if(this.status === 'pending') {
this.value = value;
this.status = 'fulfilled';
this.onFulfilledArray.forEach(func => func(value));
}
})
};
const reject = (reason) => {
setTimeout(() => {
if(this.status === 'pending') {
this.reason = reason;
this.status = 'rejected';
this.onRejectedArray.forEach(func => func(value));
}
})
};
execute(resolve, reject);
};
L1Promise.prototype.then = function(onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function'
? onfulfilled : data => data;
onrejected = typeof onrejected === 'function'
? onrejected : error => {throw error};
if(this.status === 'fulfilled') {
onfulfilled(this.value);
}
if(this.status === 'rejected') {
onrejected(this.reason);
}
// 这里为啥要pending状态做处理，then里面正常不是只有对结果的执行嘛？
if(this.status === 'pending') {
//两个数组存放的状态作用在我们完善中其实有两个作用，其中一个是上面提到的发布订阅
this.onFulfilledArray.push(onfulfilled);
this.onRejectedArray.push(onrejected);
}
};
请一定要过一遍当中的细节，尤其是then里面对pending的处理，用的数组存放，这里其实是有一个promise.then().then() 的考虑以及同时两个promise.then() ,promise.then()，我们需要保证他们按照then的注册顺序执行，
ok在保证注册顺序执行then函数的情况下，那我们接下来来到了promise的核心，链式调用，对应上面的第一个回调地狱
//我们可以分别执行以下如下代码：
let promise = new Promise((resolve, reject) => {
// T1
setTimeout(() => {
resolve('hello');
}, 1000)
});
// T0 + 0.0000001s
promise.then((data) => {
console.log(data);
return data + 'sanduo';
})
.then(data => {
console.log(data);
});
let promise1 = new L1Promise((resolve, reject) => {
// T1
setTimeout(() => {
resolve('hello');
}, 1000)
});
// T0 + 0.0000001s
promise1.then((data) => {
console.log(data);
return data + ' sanduo';
})
.then(data => {
console.log(data);
})
ok,我们可以发现，promise可以，自己手写的L1Promise不行，这就是因为我们没有在第一次then函数的返回值中进行返回，也没有考虑then方法可以被多次调用，这里又引出另外一条promiseA+规范，
【rule--】
then应该返回一个promise
onFulfilled / onRejected 执行的结果为x，调用resolvePromise；
如果 onFulfilled / onRejected 执行时抛出异常，promise2需要调用reject；
如果 onFulfilled / onRejected 不是一个函数，则按照之前的他们会被忽略，然后promise2以promise1 的value/reason 触发fulfilled / rejected
【--rule】
根据以上内容，我们需要再次对L1Promise进行完善，使其支持链式调用；
// let promise2 = promise.then(onFulfilled,onRejected);
function L2Promise(execute) {
this.status = 'pending';
this.value = null;
this.reason = null;
this.onFulfilledArray = [];
this.onRejectedArray = [];
const resolve = (value) => {
setTimeout(() => {
if(this.status === 'pending') {
this.value = value;
this.status = 'fulfilled';
this.onFulfilledArray.forEach(func => func(value));
}
})
};
const reject = (reason) => {
setTimeout(() => {
if(this.status === 'pending') {
this.reason = reason;
this.status = 'rejected';
this.onRejectedArray.forEach(func => func(value));
}
})
};
// try catch
execute(resolve, reject);
};
L2Promise.prototype.then = function(onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function'
? onfulfilled : data => data;
onrejected = typeof onrejected === 'function'
? onrejected : error => {throw error};
let promise2; // 作为 then 函数的返回值。
if(this.status === 'fulfilled') {
//这里可以看到，return的是一个新的promise，下面的rejected状态一样的
return promise2 = new L2Promise((resolve, reject) => {
setTimeout(() => {
try {
let result = onfulfilled(this.value);
resolve(result);
} catch(e) {
reject(e);
}
})
})
}
if(this.status === 'rejected') {
return promise2 = new L2Promise((resolve, reject) => {
setTimeout(() => {
try {
let result = onrejected(this.reason);
resolve(result);
} catch(e) {
reject(e);
}
})
})
}
if(this.status === 'pending') {
return promise2 = new L2Promise((resolve, reject) => {
this.onFulfilledArray.push(() => {
try {
let result = onfulfilled(this.value);
resolve(result);
}
catch(e) {
reject(e);
}
})
this.onRejectedArray.push(() => {
try {
let result = onrejected(this.reason);
resolve(result);
}
catch(e) {
reject(e);
}
})
})
}
};
可以看出上面的demo，我把完善的地方都加了注释，这样的一个promise就一个完成大半了，还有一个resolvePromise，但是我觉得能了解或者手写到链式调用这一步，我觉得已经可以给面试官一个比较好的答卷了，
最后我们提一下resolvePromise的规范
resolvePromise(promise2, x, resolve, reject)
[rule--]
- resolvePromise 的规范
- 如果 promise2 和 x 相等，那么 reject TypeError
- 如果 x 是一个 promise
如果 x 是 pending 态，那么 promise 必须要在 pending ,直到 x 变成 fulfilled or rejected.
如果 x 被 fulfilled, fulfill promise with the same value.
如果 x 被 rejected, reject promise with the same reason. - 如果 x 是一个 object 或者 是一个 function
let then = x.then.
如果 x.then 这步出错，那么 reject promise with e as the reason.
如果 then 是一个函数，then.call(x, resolvePromiseFn, rejectPromise)
resolvePromiseFn 的 入参是 y, 执行 resolvePromise(promise2, y, resolve, reject);
rejectPromise 的 入参是 r, reject promise with r.
如果 resolvePromise 和 rejectPromise 都调用了，那么第一个调用优先，后面的调用忽略。
如果调用then抛出异常e
如果 resolvePromise 或 rejectPromise 已经被调用，那么忽略
则，reject promise with e as the reason
如果 then 不是一个function. fulfill promise with x.
[--rule]
网友评论