当前位置：首页 > news >正文

JavaScript Promise 详解：从入门到精通

news 2025/10/11 6:58:56

1. 什么是Promise？

在JavaScript中，Promise是一种用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。

1.1 为什么需要Promise？

在Promise出现之前，JavaScript主要使用回调函数来处理异步操作，这经常导致"回调地狱"（Callback Hell）：

// 回调地狱示例
getUser(userId, function(user) {getPosts(user.id, function(posts) {getComments(posts[0].id, function(comments) {getReplies(comments[0].id, function(replies) {// 更多嵌套...});});});
});

Promise的出现解决了这个问题，让异步代码更加清晰、可维护。

2. Promise的基本概念

2.1 Promise的三种状态

pending（待定）：初始状态，既不是成功，也不是失败
fulfilled（已兑现）：操作成功完成
rejected（已拒绝）：操作失败

2.2 创建Promise

// 创建Promise的基本语法
const myPromise = new Promise((resolve, reject) => {// 异步操作const success = true; // 模拟操作结果if (success) {resolve('操作成功！'); // 状态变为fulfilled} else {reject('操作失败！'); // 状态变为rejected}
});

3. Promise的使用方法

3.1 then() 方法

then() 方法用于处理Promise的成功结果：

const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('数据获取成功！');}, 1000);
});promise.then((result) => {console.log(result); // "数据获取成功！"},(error) => {console.error(error); // 处理错误}
);

3.2 catch() 方法

catch() 方法专门用于处理Promise的失败情况：

const promise = new Promise((resolve, reject) => {setTimeout(() => {reject(new Error('网络请求失败！'));}, 1000);
});promise.then((result) => {console.log(result);}).catch((error) => {console.error('捕获到错误:', error.message); // "捕获到错误: 网络请求失败！"});

3.3 finally() 方法

finally() 方法无论Promise成功还是失败都会执行：

const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('操作完成！');}, 1000);
});promise.then((result) => console.log(result)).catch((error) => console.error(error)).finally(() => {console.log('无论成功失败都会执行'); // 总会执行});

4. Promise链式调用

Promise的强大之处在于链式调用：

function getUser(userId) {return new Promise((resolve) => {setTimeout(() => {resolve({ id: userId, name: '张三' });}, 500);});
}function getPosts(user) {return new Promise((resolve) => {setTimeout(() => {resolve([...user.posts, '文章1', '文章2']);}, 500);});
}function getComments(post) {return new Promise((resolve) => {setTimeout(() => {resolve([...post.comments, '评论1', '评论2']);}, 500);});
}// 链式调用 - 解决了回调地狱
getUser(1).then(user => {console.log('用户:', user);return getPosts(user);}).then(posts => {console.log('文章:', posts);return getComments(posts[0]);}).then(comments => {console.log('评论:', comments);}).catch(error => {console.error('错误:', error);});

5. Promise静态方法

5.1 Promise.resolve() 和 Promise.reject()

// 创建立即解决的Promise
const resolvedPromise = Promise.resolve('立即解决的值');// 创建立即拒绝的Promise
const rejectedPromise = Promise.reject(new Error('立即拒绝'));resolvedPromise.then(console.log); // "立即解决的值"
rejectedPromise.catch(error => console.error(error.message)); // "立即拒绝"

5.2 Promise.all()

等待所有Promise完成，如果有一个失败，整个Promise.all就会立即失败：

const promise1 = Promise.resolve('结果1');
const promise2 = new Promise(resolve => setTimeout(() => resolve('结果2'), 1000));
const promise3 = fetch('https://api.example.com/data');Promise.all([promise1, promise2, promise3]).then(results => {console.log('所有操作完成:', results);}).catch(error => {console.error('有一个操作失败:', error);});

5.3 Promise.race()

返回第一个完成（成功或失败）的Promise的结果：

const promise1 = new Promise(resolve => setTimeout(() => resolve('第一个完成'), 500));
const promise2 = new Promise(resolve => setTimeout(() => resolve('第二个完成'), 1000));Promise.race([promise1, promise2]).then(result => {console.log(result); // "第一个完成"});

5.4 Promise.allSettled()

等待所有Promise完成（无论成功或失败）：

const promise1 = Promise.resolve('成功');
const promise2 = Promise.reject('失败');Promise.allSettled([promise1, promise2]).then(results => {results.forEach(result => {if (result.status === 'fulfilled') {console.log('成功:', result.value);} else {console.log('失败:', result.reason);}});});

5.5 Promise.any()

返回第一个成功的Promise，如果所有都失败，则返回AggregateError：

const promise1 = Promise.reject('错误1');
const promise2 = new Promise(resolve => setTimeout(() => resolve('成功2'), 500));
const promise3 = Promise.reject('错误3');Promise.any([promise1, promise2, promise3]).then(result => {console.log(result); // "成功2"}).catch(error => {console.error('所有Promise都失败了:', error);});

6. 实际应用示例

6.1 异步数据获取

class ApiService {static async getUserData(userId) {try {const user = await this.fetchUser(userId);const posts = await this.fetchUserPosts(user.id);const comments = await this.fetchPostComments(posts[0].id);return {user,posts,comments};} catch (error) {console.error('获取用户数据失败:', error);throw error;}}static fetchUser(userId) {return new Promise((resolve) => {setTimeout(() => {resolve({ id: userId, name: '李四', email: 'lisi@example.com' });}, 300);});}static fetchUserPosts(userId) {return new Promise((resolve) => {setTimeout(() => {resolve([{ id: 1, title: '文章标题1', content: '内容1' },{ id: 2, title: '文章标题2', content: '内容2' }]);}, 300);});}static fetchPostComments(postId) {return new Promise((resolve) => {setTimeout(() => {resolve([{ id: 1, text: '很好的文章！', author: '王五' },{ id: 2, text: '受益匪浅', author: '赵六' }]);}, 300);});}
}// 使用示例
ApiService.getUserData(123).then(data => {console.log('用户数据:', data);}).catch(error => {console.error('错误:', error);});

6.2 并发请求处理

// 并发处理多个API请求
async function fetchDashboardData() {try {const [user, notifications, messages] = await Promise.all([fetch('/api/user').then(r => r.json()),fetch('/api/notifications').then(r => r.json()),fetch('/api/messages').then(r => r.json())]);return { user, notifications, messages };} catch (error) {console.error('获取仪表板数据失败:', error);throw error;}
}// 带超时控制的请求
function fetchWithTimeout(url, timeout = 5000) {const fetchPromise = fetch(url).then(response => {if (!response.ok) {throw new Error(`HTTP错误! 状态: ${response.status}`);}return response.json();});const timeoutPromise = new Promise((_, reject) => {setTimeout(() => reject(new Error('请求超时')), timeout);});return Promise.race([fetchPromise, timeoutPromise]);
}

7. Promise最佳实践

7.1 错误处理

// 好的错误处理实践
async function processData() {try {const data = await fetchData();const processed = await processData(data);return await saveData(processed);} catch (error) {// 统一错误处理console.error('数据处理失败:', error);throw new Error(`处理失败: ${error.message}`);}
}// 在Promise链中处理错误
fetchData().then(processData).then(saveData).catch(error => {// 捕获链中任何位置的错误console.error('操作失败:', error);});

7.2 避免常见的Promise陷阱

// ❌ 错误：忘记返回Promise
somePromise().then(result => {anotherPromise(result); // 忘记return}).then(finalResult => {// finalResult 会是 undefined});// ✅ 正确：总是返回Promise
somePromise().then(result => {return anotherPromise(result); // 正确返回}).then(finalResult => {// finalResult 是 anotherPromise 的结果});// ❌ 错误：在async函数中忘记await
async function badExample() {const result = someAsyncFunction(); // 忘记awaitconsole.log(result); // 输出 Promise 对象，而不是结果
}// ✅ 正确：使用await
async function goodExample() {const result = await someAsyncFunction();console.log(result); // 输出实际结果
}

8. Promise与async/await

async/await是基于Promise的语法糖，让异步代码看起来像同步代码：

// 使用async/await重写之前的例子
async function getUserData(userId) {try {const user = await getUser(userId);const posts = await getPosts(user.id);const comments = await getComments(posts[0].id);return { user, posts, comments };} catch (error) {console.error('获取数据失败:', error);throw error;}
}// 使用
getUserData(123).then(data => console.log(data)).catch(error => console.error(error));