Promise和async await

### Promise 和 Async/Await 的使用及区别 #### 1. **Promise 的基本概念** Promise 是一种用于处理异步操作的对象。它表示一个异步操作的最终完成（或失败）及其结果值。Promise 提供了 `.then` 和 `.catch` 方法来处理成功和失败的情况[^4]。 ```javascript let p1 = new Promise((resolve, reject) => { setTimeout(() => { let ran = Math.random(); console.log(ran); if (ran < 0.5) { reject('no'); return; } resolve('ok'); }, 1000); }); p1.then(result => { console.log(result); // 'ok' }, reason => { console.log(reason); // 'no' }); ``` 上述代码展示了如何创建一个 Promise，并通过 `.then` 方法处理成功的结果，通过 `.catch` 方法处理失败的结果。 #### 2. **Async/Await 的基本概念** Async/Await 是基于 Promise 的语法糖，使得异步代码看起来更像同步代码，从而提高了代码的可读性和可维护性。`async` 函数返回一个 Promise，而 `await` 表达式会暂停函数的执行，直到 Promise 被解决并返回其结果[^1]。 ```javascript async function getUser() { try { const response = await fetch('/api/user'); // 等待 fetch 完成 const user = await response.json(); // 等待 JSON 解析 return user; } catch (error) { console.error(error); } } ``` 上述代码展示了如何使用 `async/await` 来简化多个异步操作的链式调用。 #### 3. **Promise 和 Async/Await 的主要区别** - **语法复杂度**：Promise 使用链式调用（`.then` 和 `.catch`），而 Async/Await 使用更直观的 `try...catch` 结构，代码更接近同步风格[^3]。 - **错误处理**：在 Promise 中，错误处理需要显式地使用 `.catch` 方法；而在 Async/Await 中，可以使用 `try...catch` 块来捕获错误，这与同步代码的错误处理方式一致[^2]。 - **代码可读性**：Async/Await 的代码通常比 Promise 更简洁、易读，尤其是在处理多个异步操作时[^3]。 - **兼容性**：Promise 是 ES6 引入的标准特性，而 Async/Await 是 ES2017 引入的特性。因此，在较旧的环境中可能需要额外的 polyfill 或转译工具来支持 Async/Await。 #### 4. **结合使用的场景** Async/Await 可以与 Promise 的方法（如 `Promise.all` 和 `Promise.race`）结合使用，以实现更复杂的异步逻辑[^1]。 ```javascript const asyncFunc = async () => { try { const [a, b] = await Promise.all([funcA(), funcB()]); // 并行执行多个异步任务 const c = await funcC(a, b); uploadNumber(c); } catch (error) { console.error(error); } }; ``` 上述代码展示了如何结合 `Promise.all` 和 Async/Await 来并行执行多个异步任务。 --- ###