05 几种异步方式的比较
| 特性 | 回调函数 | Promise | async/await |
|---|---|---|---|
| 可读性 | 回调函数嵌套层级多，难以维护和理解 | 使用链式调用，更加清晰和易于理解 | 异步操作写法更接近同步代码，可读性最佳 |
| 错误处理 | 容易造成回调地狱，错误处理不便 | 使用 catch 方法捕获错误，更加容易处理错误 | 使用 try/catch 捕获错误，与同步代码错误处理方式一致 |
| 代码结构 | 容易产生回调地狱，难以维护 | 代码结构清晰，易于维护和扩展 | 代码结构清晰，与同步代码类似，易于理解和维护 |
| 错误传播 | 错误处理需要在每个回调中添加错误处理逻辑 | 错误会传递到 Promise 链的最后一个 catch 方法中 | 错误会在异步函数中自动传播，可以通过 try/catch 捕获错误 |
| 并发处理 | 回调函数容易产生回调地狱，难以处理并发请求 | 可以使用 Promise.all 和 Promise.race 处理并发请求 | 可以使用 Promise.all 和 Promise.race 处理并发请求 |
| 性能优化 | 回调函数层级多，难以进行性能优化 | Promise 对象可以进行性能优化，如缓存 Promise 实例等 | 可以使用 async 函数的并发功能进行性能优化 |
| 适用场景 | 适用于简单的异步操作，或者需要兼容老版本浏览器的情况 | 适用于复杂的异步操作，如多个异步操作的串行或并行处理 | 适用于复杂的异步操作，代码结构清晰，易于维护和理解 |
| #### 1. 回调函数（Callback Functions） |
- 描述：回调函数是最早的异步处理方式之一，它将一个函数作为参数传递给另一个函数，在异步操作完成后执行。
- 优点：简单直接，易于理解。
- 缺点：可能导致所谓的“回调地狱”，当多个异步操作嵌套时代码难以阅读和维护。
2. Promise¶
- 描述：Promise是一个对象，代表了一个尚未完成但预期将来会完成的操作的最终结果。
- 优点：解决了回调地狱的问题，提供了链式调用的方式，使得异步代码更加清晰。
- 缺点：无法取消Promise，一旦创建就会立即执行；Promise的状态改变不会是异步的，可能会导致一些微妙的错误。
3. async/await¶
- 描述：
async和await是ES2017引入的关键字，它们使得异步代码可以像同步代码一样编写和阅读。 - 优点：代码更加直观和易于理解，错误处理更加直观，与普通同步代码相似。
- 缺点：不能在
async函数外部捕获await表达式抛出的错误，必须使用try...catch包裹await表达式。
4. Generators（生成器）¶
- 描述：Generators是一种特殊的函数，可以使用
yield关键字来暂停和恢复函数的执行。 - 优点：可以与
Promise结合使用，通过co库或redux-saga等库来管理异步流程。 - 缺点：需要额外的工具和库来处理
Promise，语法不如async/await直观。
5. Event Loop（事件循环）¶
- 描述：JavaScript运行在单线程的事件循环上，非阻塞I/O操作允许JavaScript执行异步任务。
- 优点：事件循环是JavaScript异步编程的基础，无需额外的语法或结构。
- 缺点：需要深入理解事件循环和异步编程的机制，对于初学者来说可能较难。
6. 使用第三方库¶
- 描述：如
axios（HTTP请求）、lodash/debounce（防抖）、lodash/throttle（节流）等库提供了封装好的异步处理方式。 - 优点：简化异步操作，提供丰富的功能和良好的错误处理。
- 缺点：增加了代码的依赖和体积。