【Web前端】实现基于 Promise 的 API:alarm API

Promise 是处理异步操作的重要工具。它使得代码更加清晰、可读,并且能够有效地避免回调地狱。


1. 什么是 Promise?

Promise 是一种用于表示异步操作最终完成(或失败)及其结果值的对象。它可以处于以下三种状态之一:

  • Pending(待定):初始状态,既不是成功,也不是失败。
  • Fulfilled(已兑现):操作成功完成。
  • Rejected(已拒绝):操作失败。

Promise 提供了 ​​.then()​​ 方法,用于指定成功和失败的回调函数,从而允许链式调用。

javascript 复制代码
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 中用于延迟执行代码的一种方法。它接受两个参数:要执行的函数和延迟时间(以毫秒为单位)。

javascript 复制代码
console.log("Start");

setTimeout(() => {
    console.log("This message is delayed by 2 seconds");
}, 2000);

console.log("End");

上述代码会输出:

javascript 复制代码
Start
End
(This message is delayed by 2 seconds)

setTimeout() 不会阻塞主线程,而是在指定时间后执行传入的函数。


3. 实现 alarm API

现在,我们来实现一个简单的 alarm() 函数,它将返回一个 Promise 对象。在这个函数中,我们将使用 setTimeout() 来模拟闹钟功能。

javascript 复制代码
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);
    });
}
  1. 参数验证: 我们首先检查输入是否为非负数字。如果不是,则调用 ​reject​ 并返回错误信息。
  2. 设置超时: 如果输入有效,则调用 ​setTimeout()​,并在指定秒数后通过调用 ​resolve​ 来触发 Promise 的成功状态。
  3. 返回值: 最终,该函数返回一个新的 Promise 对象,可以在未来某个时刻被解决或拒绝。

接下来,让我们看看如何使用这个新创建的 alarm() 函数:

javascript 复制代码
alarm(3)
    .then(message => console.log(message))
    .catch(error => console.error(error));

运行上述代码,将等待三秒,然后输出:

javascript 复制代码
Alarm went off after 3 seconds!

你也可以多次调用该函数,以便同时启动多个闹钟:

javascript 复制代码
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}`));
});

这段代码会依次启动多个闹钟,但对于无效输入,会捕获并打印错误信息:

javascript 复制代码
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​​​​,我们可以用更简洁、更直观的方式来处理异步逻辑。这使得我们的代码看起来像同步一样,更易于理解和维护。

javascript 复制代码
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 块进行错误处理:

javascript 复制代码
Alarm went off after 2 seconds!
Alarm went off after 3 seconds!
Caught an error: Invalid time provided

总结与扩展

这种设计模式不仅适用于简单的计时器应用,还可以扩展到更复杂的场景,例如网络请求、文件读取等各种需要处理异步任务的情况。为了进一步提升你的技术水平,可以尝试以下挑战:

  • 增加对重复闹钟功能的支持,比如每隔一段时间就提醒一次。
  • 实现取消闹钟功能,使用户能够根据需求停止正在进行中的计时器。
  • 尝试把这个功能封装成类或者模块,以便重用和维护。
相关推荐
泓博18 分钟前
Objective-c把字符解析成字典
开发语言·ios·objective-c
try2find21 分钟前
安装llama-cpp-python踩坑记
开发语言·python·llama
青皮桔31 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺31 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear34 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息36 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月37 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201841 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿42 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘42 分钟前
vue文本插值
javascript·vue.js·ecmascript