Promise和async await
时间: 2025-06-30 16:08:23 浏览: 15
### 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 来并行执行多个异步任务。
---
###
阅读全文
相关推荐
















