【Web前端】实现基于 Promise 的 API：alarm API
Promise 是处理异步操作的重要工具。它使得代码更加清晰、可读，并且能够有效地避免回调地狱。
1. 什么是 Promise？
Promise 是一种用于表示异步操作最终完成（或失败）及其结果值的对象。它可以处于以下三种状态之一：
- Pending（待定）：初始状态，既不是成功，也不是失败。
- Fulfilled（已兑现）：操作成功完成。
- Rejected（已拒绝）：操作失败。
Promise 提供了 .then() 方法，用于指定成功和失败的回调函数，从而允许链式调用。
const myPromise = new Promise((resolve, reject) => {
const success = true; // 假设这是某个异步操作的结果
if (success) {
resolve("Operation was successful!");
} else {
reject("Operation failed.");
}
});
myPromise.then(result => {
console.log(result); // "Operation was successful!"
}).catch(error => {
console.error(error);
});2. 理解 setTimeout
setTimeout() 是 JavaScript 中用于延迟执行代码的一种方法。它接受两个参数：要执行的函数和延迟时间（以毫秒为单位）。
console.log("Start");
setTimeout(() => {
console.log("This message is delayed by 2 seconds");
}, 2000);
console.log("End");上述代码会输出：
Start
End
(This message is delayed by 2 seconds)setTimeout() 不会阻塞主线程，而是在指定时间后执行传入的函数。
3. 实现 alarm API
现在，我们来实现一个简单的 alarm() 函数，它将返回一个 Promise 对象。在这个函数中，我们将使用 setTimeout() 来模拟闹钟功能。
function alarm(seconds) {
return new Promise((resolve, reject) => {
if (typeof seconds !== 'number' || seconds < 0) {
return reject(new Error('Invalid time provided'));
}
setTimeout(() => {
resolve(`Alarm went off after ${seconds} seconds!`);
}, seconds * 1000);
});
}- 参数验证: 我们首先检查输入是否为非负数字。如果不是，则调用
reject 并返回错误信息。 - 设置超时: 如果输入有效，则调用
setTimeout()，并在指定秒数后通过调用 resolve 来触发 Promise 的成功状态。 - 返回值: 最终，该函数返回一个新的 Promise 对象，可以在未来某个时刻被解决或拒绝。
接下来，让我们看看如何使用这个新创建的 alarm() 函数：
alarm(3)
.then(message => console.log(message))
.catch(error => console.error(error));运行上述代码，将等待三秒，然后输出：
Alarm went off after 3 seconds!你也可以多次调用该函数，以便同时启动多个闹钟：
const alarms = [1, 2, -1, 'test', 4];
alarms.forEach(time => {
alarm(time)
.then(message => console.log(message))
.catch(error => console.error(`Error for time ${time}: ${error.message}`));
});这段代码会依次启动多个闹钟，但对于无效输入，会捕获并打印错误信息：
Alarm went off after 1 seconds!
Error for time -1: Invalid time provided
Error for time test: Invalid time provided
Alarm went off after 4 seconds!
...5. 在 alarm 上使用 async 和 await
随着 ES2017 引入了 async/await，我们可以用更简洁、更直观的方式来处理异步逻辑。这使得我们的代码看起来像同步一样，更易于理解和维护。
async function testAlarms() {
try {
const message1 = await alarm(2);
console.log(message1);
const message2 = await alarm(3);
console.log(message2);
const message3 = await alarm(-1); // This will throw an error.
} catch (error) {
console.error(`Caught an error: ${error.message}`);
}
}
testAlarms();当你运行以上代码时，你将看到前两个消息正常显示，而第三个因无效输入而引发异常，因此会进入 catch 块进行错误处理：
Alarm went off after 2 seconds!
Alarm went off after 3 seconds!
Caught an error: Invalid time provided总结与扩展
这种设计模式不仅适用于简单的计时器应用，还可以扩展到更复杂的场景，例如网络请求、文件读取等各种需要处理异步任务的情况。为了进一步提升你的技术水平，可以尝试以下挑战：
- 增加对重复闹钟功能的支持，比如每隔一段时间就提醒一次。
- 实现取消闹钟功能，使用户能够根据需求停止正在进行中的计时器。
- 尝试把这个功能封装成类或者模块，以便重用和维护。