JavaScript是单线程语言，为了避免耗时操作阻塞主线程，异步编程成为处理网络请求、文件读取等场景的必备能力。Promise和AsyncAwait是ES6及之后推出的异步解决方案，逐步替代了传统的回调函数写法。
Promise基础用法
Promise是一个代表异步操作最终完成或失败的对象，它有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），状态一旦改变就不会再变。
创建Promise实例
通过new Promise()构造函数创建实例，构造函数接收一个执行器函数，该函数有两个参数：resolve和reject，分别用于将Promise状态改为成功和失败。
// 创建一个模拟异步请求的Promise
const asyncRequest = new Promise((resolve, reject) => {
// 模拟2秒后返回结果
setTimeout(() => {
const success = true;
if (success) {
resolve({ code: 200, data: '请求成功' }); // 成功时调用resolve
} else {
reject(new Error('请求失败')); // 失败时调用reject
}
}, 2000);
});
Promise实例方法
Promise实例提供了then、catch、finally三个常用方法处理异步结果。
then：接收两个可选参数，第一个是成功回调，第二个是失败回调，返回一个新的Promise实例，支持链式调用。catch：用于捕获Promise链中的错误，等价于then(null, rejection)。finally：无论Promise成功还是失败，都会执行其中的回调，适合做清理操作。
asyncRequest
.then((res) => {
console.log('成功结果：', res);
return res.data; // 返回值会作为下一个then的参数
})
.then((data) => {
console.log('处理后的数据：', data);
})
.catch((err) => {
console.log('捕获错误：', err.message);
})
.finally(() => {
console.log('请求结束，执行清理操作');
});
Promise静态方法
Promise还提供了多个静态方法处理多个异步操作的场景：
| 方法名 | 作用 |
|---|---|
| Promise.all() | 接收多个Promise实例，所有实例都成功才返回成功，有一个失败就直接返回失败 |
| Promise.race() | 接收多个Promise实例，返回最先改变状态的实例的结果 |
| Promise.allSettled() | 接收多个Promise实例，所有实例都改变状态后返回每个实例的状态和结果 |
| Promise.any() | 接收多个Promise实例，有一个成功就返回成功，全部失败才返回失败 |
// Promise.all示例：同时请求两个接口，都成功才执行后续操作
const request1 = fetch('https://ipipp.com/api/data1');
const request2 = fetch('https://ipipp.com/api/data2');
Promise.all([request1, request2])
.then(([res1, res2]) => {
console.log('两个请求都成功', res1, res2);
})
.catch((err) => {
console.log('至少一个请求失败', err);
});
AsyncAwait用法
AsyncAwait是建立在Promise之上的语法糖，让异步代码看起来像同步代码，更易读易写。async用于声明一个异步函数，await用于等待一个Promise实例的状态改变。
基本语法
在函数前添加async关键字，函数就会返回一个Promise实例。在async函数内部，使用await等待Promise的结果，await会暂停函数执行，直到Promise状态改变。
// 用AsyncAwait改写前面的asyncRequest调用
async function handleRequest() {
try {
const res = await asyncRequest; // 等待Promise成功，获取resolve的值
console.log('成功结果：', res);
const data = res.data;
console.log('处理后的数据：', data);
} catch (err) {
console.log('捕获错误：', err.message); // 捕获reject的错误
} finally {
console.log('请求结束，执行清理操作');
}
}
handleRequest();
注意事项
await只能在async函数内部使用，否则会报错。await后面如果不是Promise实例，会被自动转换为状态为fulfilled的Promise。- 多个无依赖的异步操作不要顺序使用
await，会导致不必要的等待，可以用Promise.all配合await优化。
// 错误写法：两个无依赖的请求顺序执行，耗时是两个请求的总和
async function wrongRequest() {
const res1 = await fetch('https://ipipp.com/api/data1');
const res2 = await fetch('https://ipipp.com/api/data2');
console.log(res1, res2);
}
// 正确写法：同时发起请求，耗时取最长的那个
async function rightRequest() {
const [res1, res2] = await Promise.all([
fetch('https://ipipp.com/api/data1'),
fetch('https://ipipp.com/api/data2')
]);
console.log(res1, res2);
}
Promise和AsyncAwait的差异
两者本质都是基于Promise的异步解决方案，核心差异在于写法和使用场景：
- Promise通过链式调用处理异步，AsyncAwait用同步写法处理异步，后者代码可读性更高。
- Promise的错误处理可以用
catch捕获整个链的错误，AsyncAwait需要用try...catch捕获错误。 - 处理多个并行的无依赖异步操作时，Promise.all配合AsyncAwait是最优选择。
- 在不需要等待结果的场景下，Promise的
then写法更简洁，不需要声明async函数。
实际开发中，推荐优先使用AsyncAwait处理异步逻辑，遇到复杂的多个异步操作组合场景，结合Promise的静态方法使用，既能保证代码可读性，也能满足各种异步处理需求。
JavaScript异步编程PromiseAsyncAwait修改时间：2026-07-23 16:27:31