promise构造函数通过执行器函数封装异步操作,立即执行并适时调用resolve或reject;支持settimeout模拟延迟、事件监听(如图片加载)、fetch等真实api的语义化封装。

用 Promise 构造函数实现自定义异步操作,核心是把“不确定何时完成、但最终会有结果”的逻辑封装进 new Promise() 中,并在合适时机调用 resolve() 或 reject()。
理解 Promise 构造函数的基本结构
Promise 构造函数接收一个执行器函数(executor),它有两个参数:resolve 和 reject,都是由 JavaScript 引擎自动传入的函数:
-
resolve(value):表示异步操作成功,value是成功返回的数据; -
reject(reason):表示异步操作失败,reason通常是错误对象或描述信息。
这个执行器函数会**立即同步执行**,但内部通常包裹异步行为(如 setTimeout、fetch、事件监听、Node.js 的 fs.readFile 等)。
用 setTimeout 模拟延迟请求
这是最常用的入门示例,模拟一个 2 秒后返回数据的异步任务:
function delayFetch(data, ms = 2000) {
return new Promise((resolve, reject) => {
if (typeof data === 'undefined') {
reject(new Error('数据不能为空'));
return;
}
setTimeout(() => {
resolve({ success: true, data, timestamp: Date.now() });
}, ms);
});
}
// 使用
delayFetch('hello').then(res => console.log(res))
.catch(err => console.error(err));
封装基于事件的异步操作(如图片加载)
某些操作依赖原生事件(如 img.onload / img.onerror),可用 Promise 包装使其支持链式调用:
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`图片加载失败:${src}`));
img.src = src;
});
}
// 使用
loadImage('./avatar.jpg')
.then(img => document.body.appendChild(img))
.catch(console.error);
处理可能失败的真实异步 API(如 fetch 封装)
原生 fetch 返回 Promise,但网络错误不会触发 reject,而 HTTP 状态码异常(如 404、500)仍算 resolve。可封装为“状态码非 2xx 即 reject” 的更语义化版本:
function safeFetch(url, options = {}) {
return new Promise((resolve, reject) => {
fetch(url, options)
.then(response => {
if (!response.ok) {
reject(new Error(`HTTP ${response.status}: ${response.statusText}`));
} else {
resolve(response);
}
})
.catch(reject); // 网络错误、CORS 等直接 reject
});
}
// 使用
safeFetch('/api/user/123')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.warn('请求出错:', err.message));
关键点在于:Promise 构造函数不改变异步本质,只是提供统一的状态管理和链式处理能力。只要明确“什么算成功”、“什么算失败”、“在哪一刻决定结果”,就能可靠封装任意异步流程。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











