如何使用 await 与 setTimeout 结合进行异步等待？

在现代 JavaScript 开发中，异步编程已成为日常，理解和掌握异步原语对于编写高效、可维护的代码至关重要，本文将探讨await 和setTimeout 这两个关键概念，通过实例和解释帮助开发者更好地利用它们。

一、异步编程基础

JavaScript 最初是为浏览器设计的脚本语言，主要用于处理用户交互和页面更新，随着 AJAX（Asynchronous JavaScript and XML）的出现，异步编程成为必要，以提升用户体验，传统的回调函数虽然可以解决问题，但容易导致“回调地狱”，使代码难以阅读和维护，ES6 引入了 Promise，而 ES2017 进一步引入了 async/await 语法糖，使得异步代码的书写更加直观和易于理解。

二、Promise 简介

Promise 是异步编程的基石，它代表一个尚未完成但预期会完成的异步操作，最终返回成功的结果或失败的原因。

基本用法

let promise = new Promise((resolve, reject) => {
    let success = true; // 模拟条件
    if (success) {
        resolve("Operation succeeded");
    } else {
        reject("Operation failed");
    }
});
promise.then(result => {
    console.log(result); // "Operation succeeded"
}).catch(error => {
    console.error(error);
});

在这个例子中，我们创建了一个新的 Promise 对象，并根据条件解析（resolve）或拒绝（reject）它，我们使用.then() 方法来处理成功的结果，并使用.catch() 方法来处理错误。

then 和 catch

then(): 接受两个参数，第一个是处理成功的回调函数，第二个是处理失败的回调函数。

catch(): 专门用于处理 Promise 链中的错误。

三、async/await

async/await 是基于 Promise 的语法糖，用于简化异步代码的写法，使其看起来更像同步代码。

基本用法

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}
fetchData();

在这个例子中，async 关键字定义了一个异步函数fetchData，在函数内部，我们使用await 关键字等待异步操作（如fetch 和response.json()）完成，并获取结果，如果发生错误，try...catch 结构会捕获异常。

四、setTimeout 与异步编程

setTimeout 是一个常用的延时函数，用于在指定的时间后执行某个操作，它可以返回一个 Promise，从而与 async/await 结合使用。

setTimeout 的基本用法

console.log('Setting timeout...');
setTimeout(() => {
    console.log('This message is shown after 2 seconds');
}, 2000);
console.log('Timeout is set');

输出顺序将是：

Setting timeout...
Timeout is set
This message is shown after 2 seconds

因为setTimeout 是异步的，不会阻塞后续代码的执行。

五、结合 await 和 setTimeout

为了让await 与setTimeout 一起工作，我们需要将setTimeout 封装在一个返回 Promise 的函数中。

封装 setTimeout

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function demoAsyncFunction() {
    console.log('Waiting for 2 seconds...');
    await delay(2000);
    console.log('Finished waiting');
}
demoAsyncFunction();

在这个例子中，我们定义了一个名为delay 的函数，它接受一个时间参数，并返回一个在指定时间后解析的 Promise，在demoAsyncFunction 中，我们使用await 关键字等待delay(2000) 完成，从而实现了非阻塞的延时效果。

六、实际应用示例

假设我们在开发一个需要按顺序执行多个异步操作的应用，每个操作之间有一定的延时，我们可以使用async/await 和setTimeout 来实现这一点。

示例：顺序执行异步操作

async function executeTasks() {
    console.log('Task 1 started');
    await delay(1000); // 模拟任务耗时
    console.log('Task 1 completed');
    console.log('Task 2 started');
    await delay(500); // 模拟任务耗时
    console.log('Task 2 completed');
    console.log('Task 3 started');
    await delay(700); // 模拟任务耗时
    console.log('Task 3 completed');
}
executeTasks();

输出顺序将是：

Task 1 started
Task 1 completed (after ~1 second)
Task 2 started
Task 2 completed (after ~0.5 second)
Task 3 started
Task 3 completed (after ~0.7 second)

这样，每个任务都能在前一个任务完成后依次开始，并且每个任务之间都有相应的延时。

七、归纳与最佳实践

await 和setTimeout 的结合为 JavaScript 开发者提供了一种强大的工具，用于处理需要延时的异步操作，以下是一些最佳实践：

1、避免不必要的延时：延时可能会影响用户体验，应尽量减少不必要的延时操作，可以使用并行处理来优化性能。

2、错误处理：使用try...catch 块来捕获和处理异步操作中的错误，确保程序的健壮性。

   async function safeDemoAsyncFunction() {
       try {
           console.log('Waiting for 2 seconds...');
           await delay(2000);
           console.log('Finished waiting');
       } catch (error) {
           console.error('An error occurred:', error);
       }
   }

3、合理使用延时：在某些场景下，延时可能是必要的，例如限制 API 请求频率或模拟服务器响应时间，在这些情况下，合理使用setTimeout 可以提高应用的稳定性和用户体验。

   async function rateLimitedRequests() {
       for (let i = 0; i < 5; i++) {
           try {
               console.log(Sending request ${i + 1});
               await delay(1000); // 模拟每秒发送一个请求
               // 发送请求的逻辑
               console.log(Request ${i + 1} sent);
           } catch (error) {
               console.error(Error sending request ${i + 1}:, error);
           }
       }
   }

4、性能优化：对于需要频繁调用的延时操作，可以考虑使用更高效的方法，例如requestAnimationFrame（用于动画）或setImmediate（在某些环境中比setTimeout 更高效）。

   function useRequestAnimationFrame(callback) {
       let start = performance.now();
       function frame() {
           let elapsed = performance.now() start;
           if (elapsed >= 1000) { // 至少1秒延时
               callback();
           } else {
               requestAnimationFrame(frame);
           }
       }
       requestAnimationFrame(frame);
   }

5、代码组织：将异步逻辑封装在独立的函数中，保持代码的清晰和模块化。

   async function fetchUserData(userId) {
       try {
           let response = await fetch(https://api.example.com/users/${userId});
           let data = await response.json();
           return data;
       } catch (error) {
           console.error('Error fetching user data:', error);
           throw error; // 重新抛出错误以便调用者处理
       }
   }

6、调试与测试：使用调试工具和单元测试框架（如 Jest）来测试异步代码，确保其按预期工作。

   test('fetches user data successfully', async () => {
       let mockData = { id: 1, name: 'John Doe' };
       // 使用 Jest 的 mock 功能模拟 fetch 行为
       fetch.mockResponseOnce(JSON.stringify(mockData), { status: 200 });
       let data = await fetchUserData(1);
       expect(data).toEqual(mockData);
   });

通过遵循这些最佳实践，开发者可以更有效地利用await 和setTimeout，编写出高质量、可维护的异步代码。

小伙伴们，上文介绍了“await settimeout”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。