js异步转同步|极客笔记

js异步转同步

在JavaScript中，异步操作是非常常见的。在执行异步操作时，程序不会等待该操作完成，而是继续执行下面的代码。这种特性使得JavaScript可以更好地处理一些耗时的操作，比如网络请求或读取文件。但有时候，我们希望将异步操作转换为同步操作，以确保在某些情况下，代码执行的顺序是可控的。本文将详细介绍如何将异步操作转换为同步操作的方法。

Promise

在ES6中，引入了Promise对象，用于处理异步操作。Promise对象代表一个异步操作的结果，可以为这个结果绑定处理方法。我们可以利用Promise对象来实现将异步操作转为同步操作的功能。

使用Promise的示例

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Async operation finished");
        }, 2000);
    });
}

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

console.log("This is a synchronous operation");

在上面的示例中，asyncOperation函数返回一个Promise对象，表示一个2秒钟后完成的异步操作。通过调用then方法，我们可以在异步操作完成后执行相应的代码。而在调用asyncOperation()函数之后的console.log语句是同步执行的，不会等待异步操作完成。

将Promise对象转换为同步操作

即使使用Promise对象，JavaScript仍然是单线程执行的，异步操作会在当前执行栈之外执行，并在主线程执行任务完成后通知主线程，所以我们仍然需要将Promise对象转换为同步操作。

使用async/await

在ES8中，引入了async/await关键字，用于简化Promise的使用。在函数前面加上async关键字，可以使函数返回一个Promise对象，而使用await可以使异步操作同步执行。

async function asyncOperation() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Async operation finished");
        }, 2000);
    });
}

(async () => {
    let result = await asyncOperation();
    console.log(result);
    console.log("This is a synchronous operation");
})();

在上面的示例中，asyncOperation函数中的await关键字将异步操作转换为同步执行。在调用asyncOperation函数时，程序会等待异步操作完成后再执行后续代码。

手动实现同步操作

如果不使用async/await关键字，我们也可以手动将Promise对象转换为同步操作。其中，使用setTimeout和while循环可以实现同步执行异步操作。

function asyncOperation() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Async operation finished");
        }, 2000);
    });
}

function synchronousOperation() {
    return new Promise(async (resolve) => {
        let result = await asyncOperation();
        resolve(result);
    });
}

synchronousOperation().then((result) => {
    console.log(result);
    console.log("This is a synchronous operation");
});

在上面的示例中，synchronousOperation函数在内部使用了async/await关键字，将异步操作转换为同步操作。通过调用then方法，我们可以在异步操作完成后执行相应的代码。

Generator

除了Promise对象，ES6还引入了Generator对象，可以用来实现异步操作的同步执行。Generator函数是一个状态机，封装了多个内部状态，可以通过yield关键字来暂停和恢复代码执行。通过控制Generator的执行流程，可以实现将异步操作转换为同步操作。

使用Generator的示例

function* asyncOperation() {
    yield new Promise((resolve) => {
        setTimeout(() => {
            resolve("Async operation finished");
        }, 2000);
    });
}

function runGenerator(generator) {
    let iterator = generator();

    function iterate(iteration) {
        if (iteration.done) {
            return Promise.resolve(iteration.value);
        }
        return Promise.resolve(iteration.value).then((value) => iterate(iterator.next(value)));
    }

    return iterate(iterator.next());
}

runGenerator(asyncOperation).then((result) => {
    console.log(result);
    console.log("This is a synchronous operation");
});

在上面的示例中，asyncOperation函数是一个Generator函数，内部使用yield关键字来暂停代码执行。通过runGenerator函数，我们将Generator函数进行迭代执行，并最终实现异步操作的同步执行。

Async函数

在ES8中，引入了Async函数，是Generator函数的语法糖。Async函数可以更加清晰地定义异步操作，并使用await关键字来实现同步执行。

使用Async函数的示例

function waitForTime(time) {
    return new Promise((resolve) => {
        setTimeout(resolve, time);
    });
}

async function asyncOperation() {
    await waitForTime(2000);
    return "Async operation finished";
}

async function synchronousOperation() {
    let result = await asyncOperation();
    return result;
}

synchronousOperation().then((result) => {
    console.log(result);
    console.log("This is a synchronous operation");
});

在上面的示例中，asyncOperation和synchronousOperation函数都是Async函数，内部使用await关键字将异步操作转换为同步执行。通过调用then方法，我们可以在异步操作完成后执行相应的代码。