js实现promise常用场景使用示例
原创
js实现promise常用场景使用示例
原创
小焱
发布于 2025-10-07 10:04:54
发布于 2025-10-07 10:04:54
下面为你介绍 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 的主要优势在于能够更好地处理异步操作的流程，避免回调地狱，使代码结构更清晰、更易于维护。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
