javascript异步编程

下面我会来详细讲解“JavaScript 异步编程”的完整攻略，包括基本概念、异步编程方式、回调函数、Promise、async/await 等。

基础概念

在学习异步编程之前，我们需要了解以下几个基础概念：

同步代码

同步代码指的是按照代码的书写顺序，依次执行的代码，一行代码的执行需要等待上一行代码的执行完成。

console.log('start');

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

console.log('end');

上述代码是一个同步代码，控制台输出顺序为：先输出 start，再输出 0，1，2，最后输出 end。

异步代码

异步代码指的是不按照代码的书写顺序执行的代码，一行代码的执行不需要等待上一行代码的执行完成。在异步执行的过程中，线程将执行其他任务。

console.log('start');

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

console.log('end');

上述代码是一个异步代码。在执行 setTimeout 的过程中，由于需要等待 1000ms 的时间，这段时间内 JavaScript 引擎会执行其他任务，比如输出 end。当时间到达 1000ms 后，才回来执行 setTimeout 的回调函数。

回调函数

回调函数是一种常见的异步编程方式，它是将一个函数作为参数传递给另一个函数，在另一个函数完成后，再通过回调函数来执行相应的操作。回调函数通常在异步调用完成后被调用。

function sayHello(callback) {
  setTimeout(() => {
    console.log('Hello');
    callback();
  }, 1000);
}

function sayWorld() {
  console.log('World');
}

sayHello(sayWorld);

上述代码定义了两个函数 sayHello 和 sayWorld，在 sayHello 中使用了异步方式执行，并在异步执行结束后调用了 callback 函数，在 sayWorld 中定义了要执行的操作。在 sayHello 中调用了 sayWorld，实现了异步编程。

异步编程方式

在前面介绍的基础概念中，我们已经初步了解了异步编程的概念和方式。现在我们来完整了解 JavaScript 中常见的异步编程方式。

回调函数

回调函数是 JavaScript 中最常见的异步编程方式，它的作用是在异步操作执行完毕后，通知 JavaScript 引擎要执行的后续操作。

function async(callback) {
  setTimeout(() => {
    callback();
  }, 2000);
}

function cb() {
  console.log('callback function is called');
}

async(cb);

上述代码定义了一个异步操作 async，它的参数是一个回调函数 callback，当异步操作执行完毕后，调用回调函数 callback，在回调函数 cb 中定义了要执行的操作。

Promise

Promise 是 ES6 中新增的异步编程方式，它的作用是用于处理异步操作，并在异步操作执行完成后，通知 JavaScript 引擎要执行的后续操作。

function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Promise resolved');
    }, 2000);
  });
}

async().then((res) => {
  console.log(res);
});

上述代码定义了一个 Promise，异步操作执行完成后，调用 resolve 方法，此时 Promise 的状态变为已完成，调用 then 方法，执行后续操作。

async/await

async/await 是 ES8 中新增的异步编程方式，它是基于 Promise 实现的，可以进一步简化异步调用的代码，增加代码的可读性和可维护性。

function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Promise resolved');
    }, 2000);
  });
}

async function main() {
  const res = await async();
  console.log(res);
}

main();

上述代码使用 async/await 简化了 Promise 的调用方式，可以使用类似同步代码的写法来执行异步操作。

示例说明

下面我们通过两个示例来说明异步编程的应用场景和实现方式。

模拟请求数据的异步操作

假设我们需要通过发送请求获取数据，为了尽快响应用户的请求，并不完全等待请求完成后再响应，需要将请求数据的操作异步执行。我们可以通过回调函数来实现异步操作。

function requestData(callback) {
  setTimeout(() => {
    const data = {
      name: 'John',
      age: 29,
    }
    callback(data);
  }, 2000);
}

function displayData(data) {
  console.log(data);
}

requestData(displayData);

上述代码定义了一个 requestData 函数，它模拟了请求数据的异步操作，当请求执行完成后，调用 callback 函数，并将返回结果传递给 callback 函数。在 displayData 函数中定义了要执行的操作。

Promise 实现异步操作

在 Promise 模型中，异步操作的调用可以使用 then 方法，将异步操作执行完成后的结果传递给 then 方法，并执行后续操作。

function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        name: 'John',
        age: 29,
      }
      resolve(data);
    }, 2000);
  });
}

requestData().then((data) => {
  console.log(data);
});

上述代码使用 Promise 实现了异步操作，requestData 函数返回一个 Promise 对象，对于 requestDate 所执行的异步操作，then 方法会在异步操作完成后被调用，并将操作执行结果传递给 then 方法，接着执行后续操作。