eventLoop:在异步代码完成后仍有可能要在一旁等待,因为此时程序可能在做其他的事情,等到程序空闲下来才有时间去看哪些异步已经完成了。JavaScript 有一套机制去处理同步和异步操作,就是事件轮询。
异步任务分为:宏任务和微任务。宏任务会进入一个队列,而微任务会进入到另一个不同的队列,且微任务要优于宏任务执行。
消息队列:是一个存储着异步任务的队列,其中的任务严格按照时间先后顺序执行,排在队头的任务将会率先执行,而排在队尾的任务会最后执行。事件队列每次仅执行一个任务,在该任务执行完毕之后,再执行下一个任务。执行栈则是一个类似于函数调用栈的运行容器,当执行栈为空时,JS 引擎便检查事件队列,如果事件队列不为空的话,事件队列便将第一个任务压入执行栈中运行。
// 代码题 一
var a, b, c;
new Promise(resolve => {
resolve();
})
.then(() => {
setTimeout(() => {
a = 'hello';
}, 1000);
})
.then(() => {
setTimeout(() => {
b = 'lagou';
}, 1000);
})
.then(() => {
setTimeout(() => {
c = 'I love U'
console.log(a, b, c);
}, 1000);
})
// 二 1
const fp = require('lodash/fp');
const { resolve, reject } = require('bluebird');
function reverse(params) {
return params.reverse()
}
function first(params) {
return params[0]
}
var fun = fp.flowRight(fp.prop('in_stock'), fp.last)
fun(cars)
// 二 2
var fun = fp.flowRight(fp.prop('name'), fp.first)
fun(cars)
// 二 3
var fun = fp.flowRight(_average, fp.map(car => car.dollar_value))
fun(cars)
// 二 4
let _underscore = fp.replace(/W+/g, '_'); // 无需改动,并在 sanitizeNames 中使用它
let sanitizeNames = fp.flowRight(fp.map(fp.flowRight(_underscore, fp.toLower)));
// 三 1
let ex1 = fp.flowRight(fp.map(v => fp.add(v, 1)));
// 三 2
let ex2 = xs.map(i => fp.first(i))
// 三 3
let ex3 = () => safeProp('name', user).map(fp.first)._value;
// 三 4
let ex4 = n => Maybe.of(n).map(parseInt)
// 四
// 初始状态
const PENDING = "pending";
// 完成状态
const FULFILLED = "fulfilled";
// 失败状态
const REJECTED = "rejected";
/**
* 1. 是个构造函数
* 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数; 函数立即执行, 参数函数异步执行
* 3. 状态一旦更改就不可以变更 只能 pending => fulfilled 或者 pending => rejected
* 4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数
* 默认的 failCallback 一定要将异常抛出, 这样下一个promise便可将其捕获 异常冒泡的目的
* 5. then 中执行回调的时候要捕获异常 将其传给下一个promise
* 如果promise状态未变更 则将回调方法添加到对应队列中
* 如果promise状态已经变更 需要异步处理成功或者失败回调
* 因为可能出现 回调结果和当前then返回的Promise一致 从而导致死循环问题
* 6. catch只是then的一种特殊的写法 方便理解和使用
* 7. finally 特点 1. 不过resolve或者reject都会执行
* 2. 回调没有参数
* 3. 返回一个Promise 且值可以穿透到下一个then或者catch
* 8. Promise.resolve, Promise.reject 根据其参数返回对应的值 或者状态的Promise即可
* 9. Proise.all 特点 1. 返回一个Promise
* 2. 入参是数组 resolve的情况下出参也是数组 且结果顺序和调用顺序一致
* 3. 所有的值或者promise都完成才能resolve 所有要计数
* 4. 只要有一个为reject 返回的Promise便reject
* 10. Proise.race 特点 1. 返回一个Promise
* 2. 入参是数组 那么出参根据第一个成功或者失败的参数来确定
* 3. 只要有一个resolve 或者reject 便更改返回Promise的状态
*
*
*/
class myPromise {
// 执行器
constructor(executor) {
try {
executor(this.resolve, this.reject);
} catch (e) {
this.reject(e)
}
}
status = PENDING;
value = undefined;
res = undefined;
successFuns = [];
failFuns = [];
resolve = (value) => {
// 改变状态
// 只有状态是等待 才可以继续
if (this.status !== PENDING) {
return;
}
// 保存value
this.value = value;
this.status = FULFILLED;
// 执行所有成功回调
while (this.successFuns.length) this.successFuns.shift()();
}
reject = (res) => {
// 改变状态
// 只有状态是等待 才可以继续
if (this.status !== PENDING) {
return;
}
// 保存res
this.res = res;
this.status = REJECTED;
if (!this.failFuns.length) {
throw '(in MyPromise)'
}
// 执行所有失败回调
while (this.failFuns.length) this.failFuns.shift()();
}
then(successCallback, failCallback) {
// 成功函数处理 忽略函数之外的其他值
successCallback = typeof successCallback === "function" ? successCallback : (v) => v;
// 失败函数处理 忽略函数之外的其他值 抛出异常 实现catch冒泡的关键
failCallback = typeof failCallback === "function" ? failCallback : (reason) => { throw reason };
let promise2 = new myPromise((resolve, reject) => {
// 异常处理
const execFun = (fn, val) => {
try {
let res = fn(val);
resolvePromise(promise2, res, resolve, reject);
} catch (e) {
reject(e);
}
};
// 执行成功回调
const execSuccessCallback = () => execFun(successCallback, this.value);
// 执行失败回调
const execFailCallback = () => execFun(failCallback, this.reason);
if (this.status === PENDING) {
// 将成功回调加入队列
this.successFuns.push(execSuccessCallback);
// 讲失败回调加入队列
this.failFuns.push(execFailCallback);
return;
}
// 延迟执行 可以将函数执行结果和当前then 返回的promise 进行比较
setTimeout(() => {
// 如果已经 fulfilled 可直接调用成功回调方法
if (this.status === FULFILLED) {
execSuccessCallback();
// 如果已经 rejected 可直接调用失败回调方法
} else if (this.status === REJECTED) {
execFailCallback();
}
}, 0);
});
return promise2;
}
catch(failFun) {
return this.then(undefined, failFun);
}
finally(cb) {
return this.then(
// 穿透正常值
(value) => MyPromise.resolve(callback()).then(() => value),
(reason) =>
MyPromise.resolve(callback()).then(() => {
// 穿透异常信息
throw reason;
})
);
}
static resolve(value) {
// 如果是MyPromise 实例 则直接返回
if (value instanceof MyPromise) return value;
// 如果是MyPromise 实例 否则返回一个 MyPromise实例
return new MyPromise((resolve) => resolve(value));
}
static reject(reason) {
// 如果是MyPromise 实例 则直接返回
if (reason instanceof MyPromise) return reason;
// 如果是MyPromise 实例 否则返回一个 MyPromise实例
return new MyPromise((resolve, reject) => reject(reason));
}
// all方法
static all(array) {
// 存储结果
let result = [];
// 存储数组长度
let len = array.length;
// 创建返回MyPromise
let promise = new MyPromise((resolve, reject) => {
// 定义当前MyPromise的索引
let index = 0;
// 添加数据的公用方法
function addData(key, data) {
// 赋值
result[key] = data;
// 索引递增
index++;
// 全部执行完则resolve
if (index == len) {
resolve(result);
}
}
// 按顺序变量数组
for (let i = 0; i < len; i++) {
let curr = array[i];
// 如果是MyPromise则 按其规则处理
if (curr instanceof MyPromise) {
curr.then((value) => addData(i, value), reject);
} else {
// 非MyPromise直接赋值
addData(i, curr);
}
}
});
// 返回新的MyPromise实例
return promise;
}
// 只要有一个成功或者失败就返回
static race(array) {
let promise = new MyPromise((resolve, reject) => {
for (let i = 0; i < array.length; i++) {
let curr = array[i];
// MyPromise实例 结果处理
if (curr instanceof MyPromise) {
curr.then(resolve, reject);
} else {
// 非MyPromise实例处理
resolve(curr);
}
}
});
return promise;
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
return;
}
if (x instanceof myPromise) {
x.then((value) => {
resolve(value);
}, res => {
reject(res)
})
} else {
resolve(x);
}
}
new myPromise((resolve, reject) => {
const num = Math.ceil(Math.random() * 10);
if (num > 5) {
resolve('cccccccccccccc');
} else {
reject('dddddddddddddddd')
}
})
网友评论