setTimeout、Promise、Async/Await 的区别？

发布于 2024-09-26 06:01:14 字数 5677 浏览 9 评论 0

setTimeout 、 Promise 和 Async/Await 都是用于处理异步操作的工具，它们在异步操作的行为和执行方式上有显著的区别。下面将详细介绍它们的区别。

1. 基本概念

`setTimeout`

setTimeout 是一个用于延迟执行代码的函数。你可以指定一个回调函数和一个延迟时间（以毫秒为单位）。当延迟时间到达后，JavaScript 会将回调函数推入事件队列中等待执行。
主要用于简单的延时操作，或在一定时间后执行某些代码。

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

`Promise`

Promise 是一个用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。 Promise 有三种状态： pending （进行中）、 fulfilled （已成功）和 rejected （已失败）。
通过 .then() 方法处理成功结果，通过 .catch() 方法处理错误，通过 .finally() 在操作结束后进行清理。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success');
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出: Success
}).catch(error => {
    console.error(error);
});

`Async/Await`

Async/Await 是 ES2017 引入的语法糖，用于在处理异步操作时编写同步代码风格的逻辑。 async 函数返回一个 Promise ， await 关键字暂停函数执行，等待 Promise 解决并返回其结果。
Async/Await 使得异步代码更具可读性，减少了回调地狱问题。

async function asyncFunction() {
    const result = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('Success');
        }, 1000);
    });
    console.log(result); // 输出: Success
}

asyncFunction();

2. 执行顺序

`setTimeout`

setTimeout 不会阻塞主线程，定时器到期后，回调函数将被放入事件队列，等待主线程空闲时执行。因此， setTimeout 的回调函数的执行时间可能会受到其他代码执行的影响。

console.log('Start');

setTimeout(() => {
    console.log('Inside setTimeout');
}, 0);

console.log('End');

// 输出顺序：
// Start
// End
// Inside setTimeout

即使 setTimeout 的延迟时间为 0，它的回调函数仍然会在主线程的当前执行栈空闲后才会执行。

`Promise`

Promise 的执行顺序依赖于微任务队列（microtask queue），它比 setTimeout 的宏任务队列（macrotask queue）具有更高的优先级。因此， Promise 回调（即 .then() 、 .catch() ）会在当前事件循环结束之前执行。

console.log('Start');

const promise = Promise.resolve();
promise.then(() => {
    console.log('Inside Promise');
});

setTimeout(() => {
    console.log('Inside setTimeout');
}, 0);

console.log('End');

// 输出顺序：
// Start
// End
// Inside Promise
// Inside setTimeout

`Async/Await`

Async/Await 是基于 Promise 实现的，因此它遵循 Promise 的执行规则。 await 会暂停当前函数的执行，等待 Promise 解决后继续执行。

async function asyncFunction() {
    console.log('Start');

    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('Inside Promise');
            resolve();
        }, 0);
    });

    console.log('End');
}

asyncFunction();

// 输出顺序：
// Start
// Inside Promise
// End

await 在遇到 Promise 时暂停执行， Promise 解决后继续执行剩下的代码。

3. 适用场景

`setTimeout`

适用于简单的定时操作或延迟执行某段代码。适用于在特定时间之后执行某个任务，但不适合复杂的异步流程控制。

`Promise`

适用于处理一系列异步操作，特别是那些依赖于其他异步操作完成的场景。通过链式调用， Promise 可以更好地管理异步操作顺序，避免回调地狱。

`Async/Await`

适用于需要简化异步代码逻辑的场景，使得异步操作看起来像同步代码。 Async/Await 在处理多个异步操作时非常方便，尤其是在错误处理和异步操作依赖的情况下。

4. 错误处理

`setTimeout`

在 setTimeout 中，错误处理必须通过回调函数内的 try/catch 来实现。

setTimeout(() => {
    try {
        throw new Error('An error occurred');
    } catch (error) {
        console.error(error);
    }
}, 1000);

`Promise`

Promise 的错误处理是通过 .catch() 方法实现的， .catch() 可以捕获链中的任何错误。

const promise = new Promise((resolve, reject) => {
    reject('An error occurred');
});

promise.catch(error => {
    console.error(error); // 输出: An error occurred
});

`Async/Await`

Async/Await 中的错误处理更为直观，使用 try/catch 语句包裹异步代码即可。

async function asyncFunction() {
    try {
        const result = await Promise.reject('An error occurred');
        console.log(result);
    } catch (error) {
        console.error(error); // 输出: An error occurred
    }
}

asyncFunction();