本文详解如何正确封装基于 settimeout 的异步耗时操作，通过 promise 构造函数或 async/await 实现可链式调用、可 await 的模拟长任务，并确保执行顺序与结果返回完全符合预期。
本文详解如何正确封装基于 settimeout 的异步耗时操作，通过 promise 构造函数或 async/await 实现可链式调用、可 await 的模拟长任务，并确保执行顺序与结果返回完全符合预期。
在 JavaScript 中模拟“耗时过程”（如 API 请求、文件读取、计算密集型任务）是异步编程的常见需求。但直接使用 setTimeout 无法天然返回 Promise，若强行标注 async 却未显式返回 Promise，会导致 .then() 接收到 undefined —— 这正是原问题中输出 "undefined" 的根本原因。
关键在于：async 函数自动返回 Promise，但内部必须真正 resolve 值；而 setTimeout 是回调函数，需手动将其“Promisify”。
✅ 正确方案一：使用 Promise 构造函数封装定时器
function timeout(ms) {
return new Promise(resolve => {
setTimeout(() => resolve(), ms);
});
}
function someLongProcess(myInfoStr) {
console.log(myInfoStr + ": Process Starting");
return timeout(1000).then(() => {
console.log(myInfoStr + ": Process Finishing");
return myInfoStr + ": Process Finished";
});
}
// 使用链式调用
someLongProcess("Test A").then(
value => console.log(value), // 输出: "Test A: Process Finished"
error => console.log("Oh oh!: " + error)
);
该写法清晰表达了“启动 → 等待 → 完成 → 返回结果”的流程，且每个环节都处于 Promise 链中，保证顺序性与值传递。
✅ 正确方案二：配合 async/await 提升可读性（推荐）
function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function someLongProcess(myInfoStr) {
console.log(myInfoStr + ": Process Starting");
await timeout(1000); // 暂停执行，等待定时器完成
console.log(myInfoStr + ": Process Finishing");
return myInfoStr + ": Process Finished";
}
// 调用方式更直观
someLongProcess("Test A")
.then(result => console.log(result))
.catch(err => console.error("Oh oh!: ", err));
await 使异步逻辑线性化，避免嵌套回调，大幅提升代码可维护性。注意：await 只能在 async 函数内使用，且其后必须是一个 Promise（timeout() 正好满足）。
? 扩展：顺序执行多个任务（串行）
利用 async/await 天然的串行特性，轻松实现多任务按序执行：
async function runSequentialTests() {
await someLongProcess("Test A");
await someLongProcess("Test B");
await someLongProcess("Test C");
console.log("All tests completed sequentially.");
}
runSequentialTests();
输出顺序严格为：
Test A: Process Starting → Test A: Process Finishing → Test A: Process Finished
→ Test B: Process Starting → … → 最终完成提示。
⚠️ 注意事项与最佳实践
- ❌ 不要仅声明 async 却不 return 或 await Promise —— 这会立即 resolve undefined；
- ✅ Promise 构造函数中的 resolve/reject 是 executor 的核心参数，务必在回调中调用；
- ✅ 优先使用 .catch() 替代 .then(success, fail)，语义更清晰且能捕获上游异常；
- ? 若需并行执行多个任务（如同时发起多个请求），改用 Promise.all([p1, p2, p3])；
- ? 生产环境中，建议用 AbortController 增强超时控制与取消能力，提升鲁棒性。
掌握 Promise 封装与 async/await 组合，不仅能精准模拟长任务，更是构建可靠异步工作流的基础能力。
