下面为你介绍 JavaScript 中 Promise 的几个些常用场景及实现示例，这些场景在实际开发中经常会遇到。
1. 异步请求处理
Promise 最常见的用途之一是处理异步请求，比如使用 fetch API 调用后端接口：
// 发起 GET 请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('网络请求失败');}return response.json(); // 解析 JSON 数据}).then(data => {console.log('获取到的数据:', data);// 处理数据}).catch(error => {console.error('请求出错:', error.message);}).finally(() => {console.log('请求完成（无论成功或失败）');});
2. 定时器操作
使用 Promise 封装定时器，可以更优雅地处理延迟操作：
// 封装延迟函数
function delay(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});
}// 使用
console.log('开始');
delay(2000).then(() => {console.log('2秒后执行');return delay(1000);}).then(() => {console.log('再1秒后执行');});
3. 并行执行多个异步操作
使用 Promise.all() 可以并行执行多个异步操作，等待所有操作完成后再处理结果：
// 模拟三个异步操作
const promise1 = fetch('https://api.example.com/data1').then(res => res.json());
const promise2 = fetch('https://api.example.com/data2').then(res => res.json());
const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 1000));Promise.all([promise1, promise2, promise3]).then(results => {console.log('所有操作完成:', results);// results 是一个数组，包含三个操作的结果}).catch(error => {console.error('其中一个操作失败:', error);});
4. 只需要第一个完成的异步操作
使用 Promise.race() 可以等待第一个完成的异步操作：
// 模拟多个异步操作，其中一个会更快完成
const promiseA = new Promise(resolve => setTimeout(() => resolve('A完成'), 1000));
const promiseB = new Promise(resolve => setTimeout(() => resolve('B完成'), 500));
const promiseC = new Promise(resolve => setTimeout(() => resolve('C完成'), 1500));Promise.race([promiseA, promiseB, promiseC]).then(result => {console.log('第一个完成的操作:', result); // 会输出 "B完成"});
5. 异步操作队列
通过链式调用实现异步操作的顺序执行：
// 模拟异步任务
function asyncTask(taskName, delayMs) {return new Promise(resolve => {setTimeout(() => {console.log(`任务 ${taskName} 完成`);resolve(taskName);}, delayMs);});
}// 按顺序执行任务
asyncTask('任务1', 1000).then(() => asyncTask('任务2', 500)).then(() => asyncTask('任务3', 1500)).then(() => console.log('所有任务执行完毕'));
6. 与 async/await 结合使用
Promise 与 async/await 结合可以写出更像同步代码的异步逻辑：
// 结合 async/await 使用 Promise
async function fetchData() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('网络请求失败');}const data = await response.json();console.log('获取到的数据:', data);return data;} catch (error) {console.error('请求出错:', error.message);throw error; // 可以将错误继续抛出} finally {console.log('请求处理完成');}
}// 调用
fetchData();
这些示例覆盖了 Promise 在实际开发中的大部分常见用法。Promise 的主要优势在于能够更好地处理异步操作的流程，避免回调地狱，使代码结构更清晰、更易于维护。