乐闻
什么是 MobX，它的工作原理是什么？MobX 是一个基于信号的、经过实战测试的状态管理库，通过透明地应用函数式响应式编程（FRP）使状态管理变得简单和可扩展。它通过观察者模式自动追踪状态变化，当可观察状态发生变化时，MobX 会自动更新所有依赖该状态的派生值和反应。
## 核心概念
### 1. Observable（可观察状态）
使用 `observable` 或 `makeObservable` 将普通 JavaScript 对象、数组、Map 等转换为可观察对象。可观察状态的变化会被 MobX 自动追踪。
```javascript
import { observable } from 'mobx';
cla...
前端 · 2月21日 21:07
MobX 和 Redux 的区别是什么，如何选择？MobX 和 Redux 都是流行的状态管理库，但它们的设计理念和使用方式有很大的不同。选择哪一个取决于项目需求、团队偏好和具体场景。
## 核心设计理念
### MobX
- **基于观察者模式**：自动追踪状态变化，无需手动订阅
- **命令式编程**：直接修改状态，更符合直觉
- **透明响应式**：状态变化自动触发更新
- **灵活性高**：不强制特定的代码结构
### Redux
- **基于函数式编程**：使用纯函数处理状态变化
- **声明式编程**：通过 dispatch action 来修改状态
- **单向数据流**：Action → Reducer → Sto...
前端 · 2月21日 21:12
MobX 6 相比 MobX 4/5 有哪些重要变化？MobX 6 是 MobX 的最新主要版本，相比 MobX 4/5 有许多重要的变化和改进。了解这些变化对于升级和维护项目非常重要。
## 主要变化
### 1. 移除装饰器支持
MobX 6 默认不再支持装饰器语法，推荐使用 `makeObservable` 或 `makeAutoObservable`。
**MobX 4/5（装饰器语法）：**
```javascript
import { observable, action, computed } from 'mobx';
class TodoStore {
@observable todos = [];
@ob...
前端 · 2月21日 21:17
什么是 Promise？Promise 有哪些状态？Promise 是 JavaScript 中处理异步操作的重要机制，它代表一个异步操作的最终完成或失败。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。一旦状态改变，就不会再变。
## 核心概念
### Promise 的三种状态
- **pending**: 初始状态，既不是成功也不是失败
- **fulfilled**: 操作成功完成
- **rejected**: 操作失败
### 基本用法
```javascript
const promise = new Promise((resolve, reject)...
前端 · 2月21日 20:26
如何实现 Promise 的取消？Promise 的取消是一个常见但复杂的问题。Promise 本身不支持取消，但我们可以通过一些技巧来实现类似的功能。
## 为什么 Promise 不能被取消？
Promise 的设计遵循"不可逆"原则：
- 一旦 Promise 状态改变（pending → fulfilled 或 pending → rejected），就不能再改变
- 这种设计保证了 Promise 的可靠性和可预测性
- 取消操作会引入额外的复杂性和不确定性
## 实现取消的几种方法
### 1. 使用 AbortController
AbortController 是现代浏览器提供的取消异步操作的标...
前端 · 2月21日 20:34
Promise 的常见陷阱和最佳实践有哪些？Promise 的常见陷阱和最佳实践是每个 JavaScript 开发者都应该掌握的知识。了解这些陷阱可以帮助我们写出更健壮、更高效的异步代码。
## 常见陷阱
### 1. 忘记返回 Promise
**问题示例：**
```javascript
// 不推荐：忘记返回 Promise
function fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
console.log(data);
// 忘记返回数据
...
前端 · 2月21日 20:39
如何实现 Promise 的并发控制？Promise 的并发控制是一个重要的性能优化技术，它允许我们限制同时执行的异步操作数量，避免资源耗尽或性能下降。
## 为什么需要并发控制
### 问题场景
```javascript
// 不推荐：同时发起大量请求
async function fetchAllUrls(urls) {
const promises = urls.map(url => fetch(url));
const results = await Promise.all(promises);
return results;
}
// 问题：
// 1. 可能导致浏览器或服务器资源耗尽
// ...
前端 · 2月21日 20:31
如何优化 Promise 的性能？Promise 的性能优化是提升应用响应速度和用户体验的关键。通过合理使用 Promise 和相关技术，可以显著提高异步操作的效率。
## 避免不必要的 Promise 包装
### 问题示例
```javascript
// 不推荐：不必要的 Promise 包装
function fetchData() {
return new Promise((resolve) => {
resolve(fetch('/api/data'));
});
}
// 推荐：直接返回 Promise
function fetchData() {
return fetch('/...
前端 · 2月21日 20:33
如何理解 Promise 的链式调用？Promise 的链式调用是 Promise 最强大的特性之一，它允许我们以优雅的方式处理多个异步操作，避免了回调地狱的问题。
## 基本概念
Promise 链式调用是指通过 `.then()` 方法返回一个新的 Promise，从而可以连续调用多个 `.then()` 方法。每个 `.then()` 方法接收前一个 Promise 的结果作为参数，并返回一个新的 Promise。
## 链式调用的工作原理
### 核心机制
1. `.then()` 方法总是返回一个新的 Promise
2. 前一个 `.then()` 的返回值会传递给下一个 `.then()`
3. 如果返...
前端 · 2月21日 20:27
如何处理 Promise 的错误？Promise 的错误处理是使用 Promise 时必须掌握的重要技能。正确的错误处理可以确保程序的健壮性，避免未捕获的错误导致程序崩溃。
## 错误处理的基本方法
### 1. 使用 .catch() 方法
`.catch()` 是 Promise 错误处理的主要方法，它会捕获链中任何地方抛出的错误：
```javascript
Promise.resolve()
.then(() => {
throw new Error('出错了');
})
.catch(error => {
console.error('捕获到错误:', error.messa...
前端 · 2月21日 20:28