JS 同步异步|极客笔记

JS 同步异步

JavaScript 是一种脚本语言，通常用于网页开发，它具有单线程执行的特性。在编写 JavaScript 代码时，我们会遇到同步与异步的操作。本文将详细介绍 JavaScript 中的同步和异步操作，以及它们的区别和应用场景。

同步操作

同步操作是指代码按照顺序依次执行，每一个操作都要等待上一个操作执行完毕才能继续执行。这意味着当一个操作耗时较长时，会阻塞后续操作的执行，导致程序的运行效率较低。

下面是一个简单的示例代码，演示了同步操作的特点：

console.log('Start');

function syncOperation() {
    for (let i = 0; i < 3; i++) {
        console.log(i);
    }
}

syncOperation();

console.log('End');

运行以上代码，会依次输出 ‘Start’、0、1、2、’End’。因为 syncOperation 函数是同步执行的，所以输出是按照代码顺序依次执行的。

异步操作

异步操作是指代码在执行时不会等待前一个操作执行完成，而是继续执行后续的操作。当异步操作完成后，会通知回调函数执行相关的逻辑。

JavaScript 中常用的异步操作包括定时器、事件监听、Ajax 请求、Promise、async/await 等。

下面是一个使用定时器的示例代码，演示异步操作的特点：

console.log('Start');

setTimeout(() => {
    console.log('Async operation');
}, 2000);

console.log('End');

运行以上代码，会依次输出 ‘Start’、’End’，再等待2秒后输出 ‘Async operation’。因为 setTimeout 是一个异步操作，它会在指定的时间间隔后再次执行回调函数，不会阻塞后续代码的执行。

回调函数

在 JavaScript 中，回调函数是一种常见的处理异步操作的方式。当异步操作完成后，会调用回调函数执行后续的逻辑。

下面是一个使用回调函数的示例代码：

function asyncOperation(callback) {
    setTimeout(() => {
        callback('Async result');
    }, 2000);
}

console.log('Start');

asyncOperation((result) => {
    console.log(result);
});

console.log('End');

运行以上代码，会依次输出 ‘Start’、’End’，再等待2秒后输出 ‘Async result’。在 asyncOperation 函数中，通过回调函数返回异步操作的结果，保证了异步操作的顺序性。

Promise

Promise 是 ECMAScript 6 引入的一种异步编程解决方案，它可以更优雅地处理异步操作。

Promise 有三种状态，分别是 Pending、Fulfilled 和 Rejected。当 Promise 处于 Pending 状态时，可以通过 resolve 和 reject 方法将其状态从 Pending 变为 Fulfilled 或 Rejected。

下面是一个使用 Promise 的示例代码：

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Async result');
        }, 2000);
    });
}

console.log('Start');

asyncOperation()
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error);
    });

console.log('End');

运行以上代码，会依次输出 ‘Start’、’End’，再等待2秒后输出 ‘Async result’。在 Promise 中，使用 then 方法处理异步操作的成功结果，使用 catch 方法处理异步操作的错误结果，使代码更加简洁和可读。

async/await

async/await 是 ECMAScript 8 引入的异步编程解决方案，它是建立在 Promise 基础上的语法糖，可以更加直观地处理异步操作。

async/await 是一种特殊的语法，让异步代码看起来像同步代码一样，使程序更易于理解和维护。

下面是一个使用 async/await 的示例代码：

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Async result');
        }, 2000);
    });
}

console.log('Start');

async function runAsyncOperation() {
    try {
        const result = await asyncOperation();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

runAsyncOperation();

console.log('End');

运行以上代码，会依次输出 ‘Start’、’End’，再等待2秒后输出 ‘Async result’。在 async/await 中，使用 await 关键字等待异步操作的结果，使代码更加清晰和简洁。