沈阳做网站 熊掌号网站建设公司的转型
这是我为准备前端/全栈开发工程师面试整理的第24天每日三题练习，涵盖了：
- JavaScript 中的
Promise.all()、Promise.race()和Promise.allSettled()的实际应用和性能差异 - React 中的 Concurrent Rendering 和
useTransitionAPI - 如何设计一个高并发的在线支付系统架构
✅ 题目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)| |+----------------------------------------------------+
🧠 脑图建议
📅 明日预告：
- HTML/CSS/JS - CSS中如何实现一个保持宽高比的自适应正方形元素
- Angular - Angular的变更检测（Change Detection）机制
- 项目实战 - 微前端架构的前端应用
💪 坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！