promise的用法是什么

本文深入解析JavaScript中Promise的核心用法，涵盖基础概念到高级技巧。你将掌握创建Promise、链式调用、错误处理等12个关键技术点，每个论点均配真实代码案例。文章结合ECMAScript规范与MDN文档，详解Promise.all()、async/await等进阶场景，助你彻底告别回调地狱。

       一、Promise基础概念与创建

       Promise是处理异步操作的标准化方案，根据ECMAScript 2023规范，其实例存在三种状态：pending（等待中）、fulfilled（已成功）、rejected（已失败）。通过`new Promise()`构造函数创建时，需传入执行器函数（executor），该函数接收`resolve`和`reject`两个参数：

       javascript
// 案例1：基础创建
const downloadFile = new Promise((resolve, reject) =>
if (fileExists)
resolve('下载成功'); // 状态变为fulfilled
else
reject('文件不存在'); // 状态变为rejected

);

       

       javascript
// 案例2：模拟网络请求
const fetchData = new Promise((resolve) =>
setTimeout(() => resolve( data: '用户数据' ), 1000);
);

       

       二、then()方法的核心作用

       MDN文档指出，`then()`方法接收两个函数参数：onFulfilled（成功回调）和onRejected（失败回调）。其关键特性是返回新Promise对象，实现链式调用：

       javascript
// 案例1：基础链式调用
fetchData()
.then(response =>
console.log(response); // 输出：data: '用户数据'
return processData(response);
)
.then(processed =>
console.log(processed); // 处理后的数据
);

       

       javascript
// 案例2：错误传递
loginUser()
.then(user => getUserProfile(user.id))
.then(profile =>
// 若getUserProfile失败，此处不执行
)
.catch(error =>
console.error('链中任意环节出错', error);
);

       

       三、catch()的错误捕获机制

       根据Promise A+规范，`catch(fn)`本质是`then(null, fn)`的语法糖，专用于捕获链中未处理的rejection：

       javascript
// 案例1：捕获特定错误
validateInput(input)
.then(data => sendToServer(data))
.catch(NetworkError =>
// 仅处理网络错误
retryRequest();
);

       

       javascript
// 案例2：全局兜底
paymentProcess()
.then(confirmOrder)
.catch(error =>
// 捕获所有未被处理的错误
logToSystem(error);
showUserAlert('支付失败');
);

       

       四、finally()的必然执行逻辑

       ES2018新增的`finally()`无论Promise成功与否都会执行，适用于资源清理场景：

       javascript
// 案例：关闭加载动画
showSpinner();
fetchAPI()
.then(renderContent)
.catch(showError)
.finally(() =>
hideSpinner(); // 始终执行
);

       

       五、Promise.resolve()/reject()的快捷创建

       静态方法可快速生成确定状态的Promise：

       javascript
// 案例1：包装同步值
Promise.resolve(42)
.then(value => console.log(value)); // 42

       

       javascript
// 案例2：统一错误处理
const fallback = Promise.reject(new Error('服务不可用'));
fetchBackupData().catch(() => fallback);

       

       六、Promise.all()的并发控制

       当需要等待所有异步完成时使用，任一失败立即终止：

       javascript
// 案例：并行加载资源
Promise.all([
loadCSS('style.css'),
loadJS('app.js'),
prefetchImages()
]).then(() =>
initApp(); // 全部加载完成后执行
).catch(error =>
abortLoading(error);
);

       

       七、Promise.race()的竞速机制

       获取最先完成的结果（无论成功失败）：

       javascript
// 案例：请求超时控制
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('超时')), 5000);
);
Promise.race([fetchData(), timeout])
.then(data => useData(data))
.catch(error => handleTimeout(error));

       

       八、Promise.allSettled()的完整结果收集

       ES2020新增，等待所有Promise完成并返回状态描述对象：

       javascript
// 案例：批量操作结果统计
Promise.allSettled([
saveUser(user1),
saveUser(user2),
saveUser(user3)
]).then(results =>
const successCount = results.filter(r => r.status === 'fulfilled').length;
reportStats(successCount);
);

       

       九、async/await的同步化写法

       语法糖本质是Generator + Promise，需注意：

       javascript
// 案例1：顺序执行
async function init()
const user = await fetchUser();
const orders = await fetchOrders(user.id); // 依赖前序结果
return user, orders ;

       

       javascript
// 案例2：并行优化
async function loadDashboard()
const [user, products] = await Promise.all([
fetchUser(),
fetchProducts()
]); // 无依赖关系并发执行
renderDashboard(user, products);

       

       十、错误处理的高级模式

       结合`try/catch`与Promise方法：

       javascript
// 案例：嵌套错误处理
async function complexOperation()
try
const a = await step1();
try
const b = await step2(a);
return b;
catch (innerError)
handleStep2Error(innerError);

catch (outerError)
handleStep1Error(outerError);

       

       十一、Promise化回调函数

       通过util.promisify（Node.js）或手动封装：

       javascript
// 案例：转换fs.readFile
const promisify = require('util');
const readFileAsync = promisify(fs.readFile);
readFileAsync('config.json', 'utf8')
.then(config => parseConfig(config));

       

       十二、浏览器兼容性与polyfill方案

       根据Can I Use数据，IE11及以下需通过polyfill支持：

       

       现代框架（如Vue/React）通常内置Promise支持，但需注意异步生命周期中的使用规范。

       Promise已成为JavaScript异步编程的核心范式，其链式结构有效解决了回调地狱问题。通过合理组合then/catch、async/await及静态方法，可构建健壮的异步流程。在复杂场景中，建议结合Promise.allSettled进行状态追踪，同时注意浏览器兼容性要求。掌握这些技巧将显著提升代码可维护性与执行效率。