前端异步编程的底层原理：重新认识JavaScript

前端

2023-10-06 19:03:02

JavaScript的单线程模型

JavaScript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。

单线程模型带来的一个直接后果就是，如果一个任务执行时间过长，就会阻塞其他任务的执行。例如，如果我们在浏览器中执行一个耗时10秒的任务，那么在这10秒内，浏览器就无法响应任何其他事件，比如点击、滚动或键盘输入。

事件循环机制

为了解决单线程模型带来的问题，JavaScript引入了事件循环（event loop）机制。事件循环是一个不断循环的机制，它负责从任务队列中取出任务并执行。任务队列是一个先进先出（FIFO）队列，这意味着最早进入队列的任务将最先被执行。

当JavaScript引擎遇到一个异步任务时，它会将这个任务添加到任务队列中，然后继续执行其他任务。当当前任务执行完毕，JavaScript引擎就会从任务队列中取出一个任务并执行。

事件循环机制保证了JavaScript程序的响应性。即使有一个任务执行时间过长，也不会阻塞其他任务的执行。

异步编程技术

在JavaScript中，有许多异步编程技术，比如回调函数、Promise和async/await。这些技术可以帮助我们编写出更加健壮和可维护的代码。

回调函数

回调函数是一种将函数作为参数传递给另一个函数的技术。当被调用的函数执行完毕时，它会调用回调函数，并将执行结果作为参数传递给回调函数。

例如，我们可以使用回调函数来处理AJAX请求的结果。当AJAX请求成功返回时，回调函数会被调用，并将服务器返回的数据作为参数传递给回调函数。

function getServerData(callback) {
  // 模拟一个AJAX请求
  setTimeout(() => {
    callback({
      name: 'John Doe',
      age: 30
    });
  }, 1000);
}

getServerData(function(data) {
  console.log(data); // { name: 'John Doe', age: 30 }
});

Promise

Promise是一种表示异步操作的返回值的对象。Promise对象有三种状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。

当一个异步操作完成时，Promise对象的状态会变为fulfilled，并且Promise对象会保存异步操作的结果。当一个异步操作失败时，Promise对象的状态会变为rejected，并且Promise对象会保存异步操作的错误信息。

我们可以使用.then()方法来处理Promise对象。当Promise对象的状态变为fulfilled时，.then()方法中的第一个回调函数会被调用，并且Promise对象保存的异步操作结果会作为参数传递给回调函数。当Promise对象的状态变为rejected时，.then()方法中的第二个回调函数会被调用，并且Promise对象保存的异步操作错误信息会作为参数传递给回调函数。

function getServerData() {
  return new Promise((resolve, reject) => {
    // 模拟一个AJAX请求
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve({
          name: 'John Doe',
          age: 30
        });
      } else {
        reject(new Error('服务器错误'));
      }
    }, 1000);
  });
}

getServerData()
  .then(data => {
    console.log(data); // { name: 'John Doe', age: 30 }
  })
  .catch(error => {
    console.log(error); // Error: 服务器错误
  });

async/await

async/await是ES2017中引入的异步编程语法。async可以修饰函数，表示该函数是一个异步函数。await关键字可以修饰一个表达式，表示该表达式是一个异步操作。

当一个异步函数执行时，它会返回一个Promise对象。当Promise对象的状态变为fulfilled时，await表达式后面的代码会被执行，并且Promise对象保存的异步操作结果会作为参数传递给await表达式。当Promise对象的状态变为rejected时，await表达式后面的代码会被抛出错误。

async function getServerData() {
  try {
    const data = await new Promise((resolve, reject) => {
      // 模拟一个AJAX请求
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve({
            name: 'John Doe',
            age: 30
          });
        } else {
          reject(new Error('服务器错误'));
        }
      }, 1000);
    });

    console.log(data); // { name: 'John Doe', age: 30 }
  } catch (error) {
    console.log(error); // Error: 服务器错误
  }
}

getServerData();