面试手写第二期 Promsie相关

一. 手写实现PromiseA+规范

class Mypromise {state = 'pending'; // 状态 'pending' 'fulfilled' 'rejected'value = undefined; // 成功后的值reason = undefined; //// 如果要是 setTimeout改变状态，就先将回调保存起来resolveCallbacks = []; // .then的时候 状态为pending时，存储回调rejectCallbacks = [];constructor(fn) {const resolveHandler = (value) => {if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;console.log(this.resolveCallbacks);// 状态初始为pending,然后变化后在这里执行 fnthis.resolveCallbacks.forEach((fn) => fn(this.value));}};const rejectHandler = (reason) => {if (this.state === 'pending') {this.state = 'rejected';this.reason = reason;this.rejectCallbacks.forEach((fn) => fn(this.reason));}};try {fn(resolveHandler, rejectHandler);} catch (err) {rejectHandler(err);}}then(fn1, fn2) {fn1 = typeof fn1 === 'function' ? fn1 : (v) => v;fn2 = typeof fn2 === 'function' ? fn2 : (err) => err;// 状态还没有发生改变，存储fn1,fn2if (this.state === 'pending') {const p1 = new Mypromise((resolve, reject) => {// 保存函数// 当状态改变为fulfilled的时候，执行下面的回调this.resolveCallbacks.push(() => {try {const newValue = fn1(this.value);resolve(newValue); // p1.value} catch (error) {reject(error);}});this.rejectCallbacks.push(() => {try {const newRerson = fn2(this.reason);reject(newRerson); // p1.reason} catch (error) {reject(error);}});});return p1;}// 状态已经改变，直接执行if (this.state === 'fulfilled') {// 执行完then 返回一个新的promiseconst p1 = new Mypromise((resolve, reject) => {try {// this.value == resolve(value)里面传的值const newValue = fn1(this.value);// 返回新的值console.log(newValue);resolve(newValue);} catch (error) {reject(error);}});return p1;}if (this.state === 'rejected') {const p1 = new Mypromise((resolve, reject) => {try {const newReason = fn2(this.reason);reject(newReason);} catch (error) {reject(error);}});return p1;}}// .catch 是 then的语法糖catch(fn) {return this.then(null, fn);}finally(fn) {return this.then((value) => {return Mypromise.resolve(fn()).then(() => value)}, err => {return Mypromise.resolve(fn()).then(() => throw err)})}
}// MyPromise的静态方法
Mypromise.resolve = function (value) {return new Mypromise((resolve, reject) => resolve(value));
};Mypromise.reject = function (value) {return new Mypromise((resolve, reject) => reject(reason));
};

二. Promise.all实现

Mypromise.all = function (promiseList = []) {const p1 = new Mypromise((resolve, reject) => {const result = [];const length = promiseList.length;let resolveCount = 0;promiseList.forEach((p, index) => {p.then((data) => {result[index] = data;// resolveCount 必须在 then 里面做 ++// 不能用indexresolveCount++;if (resolveCount === length) {resolve(result);}}).catch((err) => {reject(err);});});});return p1;
};

三. Promise.race实现

Mypromise.race = function (promiseList = []) {let resolved = false; // 标记const p1 = new Promise((resolve, reject) => {promiseList.forEach((p) => {p.then((data) => {if (!resolved) {resolve(data);resolved = true;}}).catch((err) => {reject(err);});});});return p1;
};

四. Promise.allsettled实现

Mypromise.allSettled = function (promiseList = []) {return new Promise((resolve, reject) => {const res = [],len = promiseList.length,count = len;promiseList.forEach((item, index) => {item.then((res) => {res[index] = { status: 'fulfilled', value: res };},(error) => {res[index] = { status: 'rejected', value: error };}).finally(() => {if (!--count) {resolve(res);}});});});
};

六. Promise.any实现

Mypromise.any = function(promiseList = []) {return new HYPromise((resolve, reject) => {const errors = [];let rejectedCount = 0promiseList.forEach((promise, index) => {HYPromise.resolve(promise).then(value => {resolve(value)},reason => {errors[index] = reason;rejectedCount++;if (rejectedCount === promiseList.length) {reject(new AggregateError(errors, 'All promises were rejected'))}})})})
}

六. 如何实现 Promise.map，限制 Promise 并发数

pMap([1, 2, 3, 4, 5], (x) => Promise.resolve(x + 1));
pMap([Promise.resolve(1), Promise.resolve(2)], (x) => x + 1);
// 注意输出时间控制
pMap([1, 1, 1, 1, 1, 1, 1, 1], (x) => sleep(1000), { concurrency: 2 });

class Limit {constructor (n) {this.limit = nthis.count = 0this.queue = []}enqueue (fn) {// 关键代码: fn, resolve, reject 统一管理return new Promise((resolve, reject) => {this.queue.push({ fn, resolve, reject })})}dequeue () {if (this.count < this.limit && this.queue.length) {// 等到 Promise 计数器小于阈值时，则出队执行const { fn, resolve, reject } = this.queue.shift()this.run(fn).then(resolve).catch(reject)}}// async/await 简化错误处理async run (fn) {this.count++// 维护一个计数器const value = await fn()this.count--// 执行完，看看队列有东西没this.dequeue()console.log(value);return value}build (fn) {if (this.count < this.limit) {// 如果没有到达阈值，直接执行return this.run(fn)} else {// 如果超出阈值，则先扔到队列中，等待有空闲时执行return this.enqueue(fn)}}
}Promise.map = function (list, fn, { concurrency }) {const limit = new Limit(concurrency)return Promise.all(list.map(async (item) => {item = await itemreturn limit.build(() => fn(item))}))
}const array = [1, 2, 3, 4, 5];
const concurrencyLimit = 2;const mapper = async (item) => {// 模拟异步操作await new Promise((resolve) => setTimeout(resolve, 1000));return item * 2;
};Promise.map([Promise.resolve(1), Promise.resolve(2)], mapper, { concurrency: 2 }).then((results) => {console.log(results);}).catch((error) => {console.error(error);});

七. 实现函数 promisify，把回调函数改成 promise 形式

function promisify(fn) {return function (...args) {let hasCb = args.some((v) => typeof v === "function");if (hasCb) {fn(...args);} else {return new Promise((resolve, reject) => {fn(...args, cb);function cb(err, data) {if (err) {reject(err);} else {resolve(data);}}});}};
}var func1 = function (a, b, c, callback) {let rst = a + b + c;callback(null, rst);
};var func2 = promisify(func1);
func2(1, 2, 3).then((rst) => {console.log("rst", rst);
}); //输出6

八. 并发请求控制

class ConcurrencyLimiter {constructor(maxConcurrency) {this.maxConcurrency = maxConcurrency;this.activeRequests = 0;this.queue = [];}async enqueue(request) {await this.waitUntilAllowed();try {this.activeRequests++;const response = await fetch(request.url);console.log(`Request ${request.id} completed with response:`, response);} catch (error) {console.error(`Request ${request.id} failed with error:`, error);} finally {this.activeRequests--;this.processQueue();}}waitUntilAllowed() {return new Promise((resolve) => {if (this.activeRequests < this.maxConcurrency) {resolve();} else {this.queue.push(resolve);}});}processQueue() {if (this.queue.length > 0 && this.activeRequests < this.maxConcurrency) {const nextRequest = this.queue.shift();nextRequest();}}
}// 创建并发器实例，最大请求数量为 5
const limiter = new ConcurrencyLimiter(5);// 请求列表示例
const requests = [{ id: 1, url: 'https://api.example.com/data/1' },{ id: 2, url: 'https://api.example.com/data/2' },{ id: 3, url: 'https://api.example.com/data/3' },// 更多请求...
];// 启动所有请求
requests.forEach((request) => {limiter.enqueue(request);
});function fetch(url) {return new Promise((resolve, reject) => {resolve(url)})
}