【每日前端面经】2024-03-17

已于 2024-03-17 22:05:52 修改
阅读量1k 收藏 18
点赞数 24
分类专栏： 每日前端面经 文章标签： 前端 面试
于 2024-03-17 22:00:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66681776/article/details/136791362
版权

【每日前端面经】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: Array<Promise>) {
    // 总共 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: Array<Promise>) {
    // 总共 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));

// "quick"

const 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: Array<Promise>) {
    // 总共 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: Array<Promise>) {

    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: fail
Promise.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;
xxhls_
关注
专栏目录
【每日前端面经】2024-03-16
xxhls的博客
03-16 1065
前端面试专项突破——组件通信
【每日前端面经】2024-03-07
xxhls的博客
03-07 942
每日搜罗互联网上的面经
【每日前端面经】2024-03-18 停更通知
xxhls的博客
03-18 485
停更通知
【每日前端面经】2024-03-03
xxhls的博客
03-03 953
每日搜罗互联网上的面经
【每日前端面经】2024-03-04
xxhls的博客
03-04 1259
每日搜罗互联网上的面经
【每日前端面经】2024-03-11
xxhls的博客
03-11 1246
每日搜罗互联网上的面经
【每日前端面经】2024-03-05
xxhls的博客
03-05 1284
每日搜罗互联网上的面经
【每日前端面经】2024-03-10
xxhls的博客
03-10 1991
每日搜罗互联网上的面经
【每日前端面经】2024-03-13
xxhls的博客
03-13 1001
每日搜罗互联网上的面经
常见的前端面经试题整理。持续更新中....
wanghe1111_的博客
12-07 3596
2021常见的前端面经整理
前端面试题系列收藏，前端面试github仓库
frontlab的博客
03-20 1691
前端面试题一系列，看完不信学不会
高通成都linux engineer intern 一面面经
2301_78234743的博客
04-22 587
总的来说欧莱雅面试体验都是满分，我面的是管理培训生岗，难度大概中等水平，目前告知通过了。区块链钱包是连接用户与区块链网络的重要工具，它们不仅提供了安全的存储和管理数字资产的功能，还允许用户。周一还没收到oc，深圳云计算开发岗到底还有没有hc了，上周三普联发了offer，一直没签，今天了也没。我是IP本地的，硕士是本地双非，计算机专业，方向是多源信息融合定位，现在手上有两个offer，一个是。本人9本top5硕，秋招签了联洲，最近碰运气投了广西中烟，没想到顺利通关，权衡了两家的利弊，现在还在。
腾讯大数据开发面试题及参考答案（4万字长文-持续更新）
大模型大数据攻城狮的专栏
07-17 425
MapReduce 是一种编程模型，用于大规模数据集的并行处理。它将数据处理任务分解为两个阶段：Map 阶段和 Reduce 阶段。Map 阶段：输入数据被拆分成多个小块，每个小块由一个 Map 任务处理。Map 函数对数据进行键值对形式的转换，生成中间键值对输出。Shuffle 阶段：Map 任务的输出会被排序和分区，相同键的键值对会被发送到相同的 Reducer 上。Reduce 阶段。
Vue--2023.6.23
weixin_65590235的博客
06-23 399
vue
前端 Flex 布局语法详解
ning的博客
11-10 925
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
最新发布
狼堡灰太狼的博客
11-11 643
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 940
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
JavaScript 实现文本转语音功能
bjjgff的博客
11-08 484
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！相关文章你从未见过的 10 个令人惊叹的 JavaScript 技巧HTML+CSS+JS 实现动态模态超级英雄卡片效果使用 HTML 和 CSS 创建 3D 菜单效果。
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 685
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
java面经-百度准入职老哥整理.pdf
11-01
《java面经-百度准入职老哥整理.pdf》是一份关于百度准入职面试的Java面经整理。这份面经是由百度准入职的老哥整理而成，其中记录了一些面试时可能会遇到的问题以及解答方法。 这份面经对于准备参加百度准入职面试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xxhls_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值