giteahh
8273017082
- Add 8 PARA directories to .gitignore whitelist (234 files) - Completes dual-layer sync: LLM Wiki layer + PARA personal knowledge layer - markdown_output/ remains excluded (transit zone)
134 lines
2.1 KiB
Markdown
134 lines
2.1 KiB
Markdown
---
|
|
marp: "true"
|
|
theme: uncover
|
|
paginate: "true"
|
|
author: [你的姓名]
|
|
date: 2026-04-08
|
|
---
|
|
|
|
<!-- _class: cover -->
|
|
|
|
# {技术主题}
|
|
|
|
### {姓名} · {日期}
|
|
|
|
---
|
|
|
|
## 为什么关注这个话题？
|
|
|
|
- 问题现状
|
|
- 解决方案
|
|
- 实践案例
|
|
- 最佳实践
|
|
|
|
---
|
|
|
|
## 1. 问题现状
|
|
|
|
### 痛点
|
|
|
|
```javascript
|
|
// 传统做法
|
|
const result = fetchData()
|
|
.then(data => processData(data))
|
|
.then(processed => saveData(processed))
|
|
.catch(err => console.error(err));
|
|
```
|
|
|
|
- 回调地狱
|
|
- 错误处理分散
|
|
- 难以测试
|
|
|
|
### 需求
|
|
|
|
- 更清晰的代码结构
|
|
- 统一的错误处理
|
|
- 更好的类型安全
|
|
|
|
---
|
|
|
|
## 2. 解决方案
|
|
|
|
### 新架构
|
|
|
|
```javascript
|
|
// Async/Await 方式
|
|
async function handleData() {
|
|
try {
|
|
const data = await fetchData();
|
|
const processed = await processData(data);
|
|
await saveData(processed);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
```
|
|
|
|
### 核心优势
|
|
|
|
| 特性 | 传统方式 | Async/Await |
|
|
|------|----------|-----------|
|
|
| 可读性 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
|
|
| 错误处理 | 分散 | 集中 |
|
|
| 调试难度 | 高 | 低 |
|
|
| 类型安全 | 弱 | 强 |
|
|
|
|
---
|
|
|
|
## 3. 实践案例
|
|
|
|
### 真实场景
|
|
|
|
> 某电商平台重构经验，从 5000 行回调代码迁移到 1200 行 async/await。
|
|
|
|
### 性能提升
|
|
|
|
```
|
|
重构前：3.5s 响应时间
|
|
重构后：1.2s 响应时间
|
|
提升：65%
|
|
```
|
|
|
|
---
|
|
|
|
## 4. 最佳实践
|
|
|
|
### DO ✅
|
|
|
|
- 始终使用 try-catch 包裹 async 函数
|
|
- 并行处理用 `Promise.all()`
|
|
- 避免在循环中串行 await
|
|
|
|
### DON'T ❌
|
|
|
|
- 不要忽略 Promise 错误
|
|
- 不要混用 Promise 和 async/await
|
|
- 不要在循环中阻塞主线程
|
|
|
|
---
|
|
|
|
<!-- _class: lead -->
|
|
|
|
## 核心要点
|
|
|
|
1. **Async/Await** 提升代码可读性
|
|
2. **错误处理** 集中化更易维护
|
|
3. **性能优化** 并行处理是关键
|
|
|
|
---
|
|
|
|
## 推荐资源
|
|
|
|
- [MDN Async Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
|
|
- [JavaScript.info Promises](https://javascript.info/promise-basics)
|
|
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
|
|
|
|
---
|
|
|
|
<!-- _class: ending -->
|
|
<!-- _paginate: false -->
|
|
|
|
# 谢谢！
|
|
|
|
### 欢迎交流
|