（转载）20个JavaScript重点知识点（16）promise-优快云博客

Promise是一个代理对象，代表了一个在创建时不一定已知的结果。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来，使得异步方法可以像同步方法一样返回值

为什么需要 Promise？

在传统 JavaScript 异步编程中，我们使用回调函数处理异步操作，但当遇到多个异步操作嵌套时，会出现著名的 "回调地狱"(Callback Hell)：

getData(function(a) { getMoreData(a, function(b) { getMoreData(b, function(c) { // 无限嵌套... }); });});

Promise 的出现解决了：

1.回调嵌套问题

2.更好的错误处理机制

3.更清晰的异步流程控制

Promise 基本概念

1.三种状态

Pending(等待中)：初始状态

Fulfilled(已成功)：操作成功完成

Rejected(已失败)：操作失败
2. 基本语法

const promise = new Promise((resolve, reject) => { // 异步操作 if (/* 成功条件 */) { resolve(value); // 状态变为 fulfilled } else { reject(error); // 状态变为 rejected }});

核心方法

1. then()

处理成功状态：

promise.then( result => { /* 处理成功结果 */ }, error => { /* 处理错误(可选) */ });

2. catch()

专门处理错误：

promise.catch( error => { /* 处理所有错误 */ });

3. finally()

无论成功失败都会执行：

promise.finally( () => { /* 清理操作 */ });

链式调用(Chaining)

fetchData() .then(processData) .then(saveData) .catch(handleError) .finally(cleanUp);

特点：

1.每个 then() 返回新 Promise

2.可传递处理后的值给下一个 then

3.错误会冒泡传递直到被捕获

常用静态方法

1. Promise.all()

并行执行多个 Promise：

Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); // [result1, result2, result3] });

2. Promise.race()

获取最先完成的 Promise：

Promise.race([promise1, promise2]) .then(firstResult => { /* ... */ });

3. Promise.resolve() / Promise.reject()

快速创建 Promise：

// 立即解决的 PromisePromise.resolve(42).then(console.log); // 42
// 立即拒绝的 PromisePromise.reject(new Error('Fail')).catch(console.error);

错误处理示例

// 推荐方式fetchData() .then(processData) .catch(handleNetworkError) .then(saveData) .catch(handleProcessError) .finally(cleanUp);

实际案例：顺序执行异步操作

注意事项

1.Promise 创建后会立即执行

2.每个 then() 需要返回新值才能继续链式调用

3.未处理的 rejection 会导致静默失败(建议全局捕获)

4.避免在 Promise 中嵌套 Promise

Promise 的核心优势：

1.链式调用代替嵌套回调

2.统一的错误处理机制

3.更好的流程控制能力

4.可组合的异步操作

// 最终示例：完整的 Promise 流程function asyncOperation() { return new Promise((resolve, reject) => { setTimeout(() => { const success = Math.random() > 0.5; success ? resolve('成功!') : reject(new Error('失败')); }, 1000); });}
asyncOperation() .then(result => { console.log(result); return '下一步处理'; }) .then(data => { console.log(data); }) .catch(error => { console.error('捕获错误:', error); }) .finally(() => { console.log('操作完成'); });