网站维护包括哪些,互联网资源整合平台,建设工程规划许可证在哪个网站查询,atp最新排名【每日前端面经】2024-03-17 本期重点 —— Promise 欢迎订阅我的前端面经专栏#xff1a;每日前端面经 Tips:每日面经更新从 2-22 到 3-15 已有 23 篇#xff0c;最近愈发觉得内容相似度高#xff0c;并且理解程度不深 于是临时停更面经#xff0c;并将这些面经中的重…【每日前端面经】2024-03-17 本期重点 —— Promise 欢迎订阅我的前端面经专栏每日前端面经 Tips:每日面经更新从 2-22 到 3-15 已有 23 篇最近愈发觉得内容相似度高并且理解程度不深 于是临时停更面经并将这些面经中的重难点以项目实战的方式展现出来供读者参阅本期项目地址https://github.com/xxhls/02-write-promise在线预览02-write-promise 产生背景 在 Promise 出现前对于多个异步请求往往会产生回调地狱 const fs require(fs);fs.readFile(./name.txt, utf-8, (err, data) {fs.readFile(data, utf-8, (err, data) {fs.readFile(data, utf-8, (err, data) {console.log(data);});}); });通过 Promise 可以有效解决以上问题 const fs require(fs);new Promise((resolve, reject) {fs.readFile(./name.txt, utf-8, (err, data) {if (err) reject(err);resolve(data);}).then((data) {return new Promise((resolve) {fs.readFile(data, utf-8, (err, data) {resolve(data);});});}).then((data) {return new Promise((resolve) {fs.readFile(data, utf-8, (err, data) {resolve(data);});});}); })相关 API Promise.all() 接受一个 Promise 可迭代对象作为输入并返回一个 Promise。当所有输入的 Promise 都被兑现时返回的 Promise 也将被兑现并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝则返回的 Promise 将被拒绝并带有第一个被拒绝的原因 示例 const promise1 Promise.resolve(3); const promise2 Promise.resolve(4); const promise3 new Promise((resolve, reject) setTimeout(resolve, 100, foo));Promise.all([promise1, promise2, promise3]).then((values) console.log(values));// [3, 4, foo]const promise1 Promise.resolve(3); const promise2 Promise.reject(4); const promise3 new Promise((resolve, reject) setTimeout(resolve, 100, foo));Promise.all([promise1, promise2, promise3]).then((values) console.log(values)).cache((reason) console.log(reason));// 4手写 function PromiseAll(promises: ArrayPromise) {// 总共 Promise 的个数const total promises.length;// 完成的 Promise 的个数let i 0;// 存储 Resolve 结果const result [];return new Promise((resolve, reject) {// 逐一添加处理函数promises.forEach((promise) {promise.then((data) {// 完成的 Promise 的个数加一i;// Resolve 结果推入 result 中result.push(data);// 如果全部 Promise 都完成就 Resolve 结果数组if (i total) resolve(result);}).catch((reason) {// 有一个 Promise 被拒绝直接 Reject 该原因reject(reason);});});}); }Promise.allSettled() 将一个 Promise 可迭代对象作为输入并返回一个单独的 Promise。当所有输入的 Promise 都已敲定时包括传入空的可迭代对象时返回的 Promise 将被兑现并带有描述每个 Promise 结果的对象数组 示例 const promise1 Promise.resolve(3); const promise2 new Promise((resolve, reject) setTimeout(reject, 100, foo), ); const promises [promise1, promise2];Promise.allSettled(promises).then((results) results.forEach((result) console.log(result.status)), );// fulfilled // rejected手写 function PromiseAllSettled(promises: ArrayPromise) {// 总共 Promise 的个数const total promises.length;// 完成的 Promise 的个数let i 0;// 存储结果const result [];return new Promise((resolve, reject) {// 逐一添加处理函数promises.forEach((promise) {promise.then((data) {// 完成的 Promise 的个数加一i;// Resolve 结果推入 result 中result.push(fulfilled);// 如果全部 Promise 都完成就 Resolve 结果数组if (i total) resolve(result);}).catch((reason) {// 完成的 Promise 的个数加一i;// Resolve 结果推入 result 中result.push(rejected);// 如果全部 Promise 都完成就 Resolve 结果数组if (i total) resolve(result);});});}); }Promise.any() 将一个 Promise 可迭代对象作为输入并返回一个 Promise。当输入的任何一个 Promise 兑现时这个返回的 Promise 将会兑现并返回第一个兑现的值。当所有输入 Promise 都被拒绝包括传递了空的可迭代对象时它会以一个包含拒绝原因数组的 AggregateError 拒绝 示例 const promise1 Promise.reject(0); const promise2 new Promise((resolve) setTimeout(resolve, 100, quick)); const promise3 new Promise((resolve) setTimeout(resolve, 500, slow));const promises [promise1, promise2, promise3];Promise.any(promises).then((value) console.log(value));// quickconst promise1 Promise.reject(0); const promise2 new Promise((resolve, reject) setTimeout(reject, 100, quick)); const promise3 new Promise((resolve, reject) setTimeout(reject, 500, slow));const promises [promise1, promise2, promise3];Promise.any(promises).catch((reasons) console.log(reasons));// [0, quick, slow]手写 function PromiseAny(promises: ArrayPromise) {// 总共 Promise 的个数const total promises.length;// 完成的 Promise 的个数let i 0;// 存储拒绝结果const reasons [];return new Promise((resolve, reject) {// 逐一添加处理函数promises.forEach((promise) {promise.then((data) {// 如果一个 Promise 完成就 Resolve 数据resolve(data);}).catch((reason) {// 拒绝的 Promise 的个数加一i;// Reject 结果推入 reasons 中reasons.push(reason);// 如果全部 Promise 都拒绝就 Reject 结果数组if (i total) reject(reasons);});});}); }Promise.prototype.catch() 用于注册一个在 promise 被拒绝时调用的函数。它会立即返回一个等效的 Promise 对象这可以允许你链式调用其他 promise 的方法 const promise1 new Promise((resolve, reject) {throw new Error(Uh-oh!); });promise1.catch((error) {console.error(error); }); // Error: Uh-oh!Promise.prototype.finally() Promise 实例的 finally() 方法用于注册一个在 promise 敲定兑现或拒绝时调用的函数。它会立即返回一个等效的 Promise 对象这可以允许你链式调用其他 promise 方法 function checkMail() {return new Promise((resolve, reject) {if (Math.random() 0.5) {resolve(Mail has arrived);} else {reject(new Error(Failed to arrive));}}); }checkMail().then((mail) {console.log(mail);}).catch((err) {console.error(err);}).finally(() {console.log(Experiment completed);});Promise.race() 接受一个 promise 可迭代对象作为输入并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的敲定而敲定 示例 const promise1 new Promise((resolve, reject) {setTimeout(resolve, 500, one); });const promise2 new Promise((resolve, reject) {setTimeout(resolve, 100, two); });Promise.race([promise1, promise2]).then((value) {console.log(value);// Both resolve, but promise2 is faster }); // Expected output: two手写 function PromiseRace(promises: ArrayPromise) {return new Promise((resolve, reject) {// 逐一添加处理函数promises.forEach((promise) {promise.then((data) {// 如果一个 Promise 完成就 Resolve 数据resolve(data);}).catch((reason) {// 如果一个 Promise 完成就 Reject 数据reject(data);});});}); }Promise.reject() 返回一个已拒绝rejected的 Promise 对象拒绝原因为给定的参数 function resolved(result) {console.log(Resolved); }function rejected(result) {console.error(result); }Promise.reject(new Error(fail)).then(resolved, rejected); // Expected output: Error: failPromise.resolve() 将给定的值转换为一个 Promise。如果该值本身就是一个 Promise那么该 Promise 将被返回如果该值是一个 thenable 对象Promise.resolve() 将调用其 then() 方法及其两个回调函数否则返回的 Promise 将会以该值兑现 该函数将嵌套的类 Promise 对象例如一个将被兑现为另一个 Promise 对象的 Promise 对象展平转化为单个 Promise 对象其兑现值为一个非 thenable 值 const promise1 Promise.resolve(123);promise1.then((value) {console.log(value);// Expected output: 123 });Promise.prototype.then() 最多接受两个参数用于 Promise 兑现和拒绝情况的回调函数。它立即返回一个等效的 Promise 对象允许你链接到其他 Promise 方法从而实现链式调用 const promise1 new Promise((resolve, reject) {resolve(Success!); });promise1.then((value) {console.log(value);// Expected output: Success! });手写 Promise const PENDING Symbol(PENDING); const FULLFILLED Symbol(FULLFILLED); const REJECTED Symbol(REJECTED);enum Status {PENDING,FULLFILLED,REJECTED }type Executor (resolve: (value: any) void, reject: (reason: any) void) void;class MyPromise {status: Status;data: any;reason: any;onResolvedCallbacks: Function[];onRejectedCallbacks: Function[];constructor(executor: Executor) {this.status Status.PENDING;this.data null;this.reason null;this.onResolvedCallbacks [];this.onRejectedCallbacks [];const resolve (data: any) {console.log(resolve);if (this.status Status.PENDING) {this.status Status.FULLFILLED;this.data data;this.onResolvedCallbacks.forEach(fn fn());}};const reject (reason: any) {console.log(reject);if (this.status Status.PENDING) {this.status Status.REJECTED;this.reason reason;this.onRejectedCallbacks.forEach(fn fn());}};try {executor(resolve, reject);} catch (error) {reject(error);}}then(onFullfilled: (value: any) any, onRejected: (reason: any) any) {if (this.status Status.FULLFILLED) {onFullfilled(this.data);} else if (this.status Status.REJECTED) {onRejected(this.reason);} else if (this.status Status.PENDING) {this.onResolvedCallbacks.push(() {onFullfilled(this.data);});this.onRejectedCallbacks.push(() {onRejected(this.reason);});}} }console.log(测试 MyPromise); new MyPromise((resolve, reject) {setTimeout(() {console.log(执行完成);resolve(success);}, 1000); }).then((data) {console.log(回调成功);console.log(data); }, (reason) {console.log(reason); });new MyPromise((resolve, reject) {setTimeout(() {console.log(执行完成);reject(failure);}, 1000); }).then((data) {console.log(回调成功);console.log(data); }, (reason) {console.log(回调成功);console.log(reason); });export default MyPromise;