当前位置：首页 > news >正文

前端面试每日三题 - Day 24

news 来源：原创 2025/5/5 12:02:28

这是我为准备前端/全栈开发工程师面试整理的第24天每日三题练习，涵盖了：

JavaScript 中的 Promise.all()、Promise.race() 和 Promise.allSettled() 的实际应用和性能差异
React 中的 Concurrent Rendering 和 useTransition API
如何设计一个高并发的在线支付系统架构

✅ 题目1：JavaScript - 深入理解 `Promise.all()`、`Promise.race()` 和 `Promise.allSettled()` 的实际应用和性能差异

📘 解析说明

Promise 是 JavaScript 中非常重要的异步编程工具，而 Promise.all()、Promise.race() 和 Promise.allSettled() 是三个常用的 Promise 静态方法。它们的差异主要体现在如何处理多个异步操作，并且适用于不同的应用场景。

Promise.all()：接收一个包含多个 Promise 的数组，当所有 Promise 都成功时返回一个新的 Promise，否则返回失败的第一个 Promise。
Promise.race()：接收一个包含多个 Promise 的数组，返回第一个成功或失败的 Promise，并忽略其他 Promise。
Promise.allSettled()：接收一个包含多个 Promise 的数组，等待所有 Promise 都完成（无论是成功还是失败），并返回一个包含每个 Promise 结果的数组。

📎 示例代码

// Promise.all 示例
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
const promise3 = 42;Promise.all([promise1, promise2, promise3]).then(values => {console.log(values);  // [3, 'foo', 42]
}).catch(error => {console.error(error);  // 若任意 Promise 失败，将跳转到此
});// Promise.race 示例
const promise4 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'First'));
const promise5 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'Second'));Promise.race([promise4, promise5]).then(value => {console.log(value);  // 'Second'
}).catch(error => {console.error(error);
});// Promise.allSettled 示例
const promise6 = Promise.resolve(1);
const promise7 = Promise.reject('Error');
const promise8 = new Promise((resolve) => setTimeout(resolve, 2000, 'Delayed'));Promise.allSettled([promise6, promise7, promise8]).then(results => {console.log(results);// [{status: 'fulfilled', value: 1}, {status: 'rejected', reason: 'Error'}, {status: 'fulfilled', value: 'Delayed'}]
});

⚠️ 常见用法与适用场景

Promise.all()：适用于需要等待多个异步操作都成功时再执行后续操作的场景。例如并发请求多个 API。
Promise.race()：适用于需要等待第一个完成的异步操作的场景。例如设置请求超时机制，谁先返回就使用哪个。
Promise.allSettled()：适用于需要等待所有异步操作完成并且需要处理每个操作的结果（无论成功或失败）的场景。例如同时请求多个 API，并且你希望在每个请求完成时都能得到结果。

🧠 脑图建议

✅ 题目2：React - 解析 Concurrent Rendering 和 `useTransition` API

📘 解析说明

Concurrent Rendering 是 React 中的一项重要功能，它能够允许 React 在多个任务之间切换，而不会让用户界面（UI）卡顿。通过合理的任务调度，React 能够在后台完成繁重的渲染工作，从而提高渲染性能和用户体验。

Concurrent Rendering：通过将渲染任务拆分为多个较小的任务，使得 React 可以在需要时暂停渲染，继续处理高优先级的任务，并最终完成渲染。
useTransition API：是 React 18 中新增的一个 Hook，允许开发者标记某些渲染为“非紧急”任务，从而让这些任务在用户交互中优先级较低。

📎 典型示例

import React, { useState, useTransition } from 'react';function App() {const [isPending, startTransition] = useTransition();const [inputValue, setInputValue] = useState("");const handleChange = (event) => {const value = event.target.value;startTransition(() => {setInputValue(value);});};return (<div><inputtype="text"value={inputValue}onChange={handleChange}placeholder="Type something..."/>{isPending ? <div>Loading...</div> : <div>{inputValue}</div>}</div>);
}export default App;

💼 工作原理

Concurrent Rendering：当 React 渲染一个复杂的组件时，它会将渲染过程分成多个小任务，并根据任务的优先级处理它们。这样即使在执行复杂任务时，用户界面也能保持响应。
useTransition API：useTransition 返回一个布尔值 isPending，表示渲染任务是否在进行中。开发者可以通过 startTransition 方法将某些操作标记为非紧急任务，从而延迟这些操作的执行，以便优先处理用户的交互操作。

🧠 脑图建议

✅ 题目3：系统设计 - 设计一个高并发的在线支付系统架构

📘 解析说明

在设计一个高并发的在线支付系统时，我们需要考虑系统的可扩展性、容错性、性能优化和安全性。一个典型的在线支付系统架构应包括多个关键组件，如支付网关、事务处理、数据库、负载均衡和分布式缓存等。

✨ 关键组件

支付网关：负责接收支付请求并与外部支付平台（如支付宝、微信支付）进行通信。
事务处理系统：负责处理支付交易的逻辑，包括资金的冻结、支付确认和事务记录。
数据库：存储交易信息、用户数据和支付历史，采用高可用的数据库架构，保证数据的一致性。
负载均衡：通过负载均衡器分发请求，确保系统高并发时仍然稳定运行。
分布式缓存：利用 Redis 等分布式缓存来缓存热点数据，减少数据库负担，提高响应速度。
安全性设计：采用加密技术保护用户支付信息，防止攻击和数据泄露。

🏠架构图示

+---------------------+     +-----------------+    +-------------------+
| Payment Gateway     | --> | Transaction     | --> | Payment Database  |
| (API, Webhooks)     |     | Processor       |    | (MySQL, NoSQL)    |
+---------------------+     +-----------------+    +-------------------+^                        |                           ||                        v                           vLoad Balancer             Cache (Redis)              Security Layer (SSL)|                                                    |+----------------------------------------------------+