JS同步和异步：事件循环如何让JavaScript如此快速？

2023-12-09 11:02:27

同步任务与异步任务

JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。任务可以分为两种类型：同步任务和异步任务。

同步任务是指在主线程上执行的任务，并且必须在继续执行其他任务之前完成。例如，变量声明、函数调用和简单的算术运算都是同步任务。

异步任务是指在主线程之外执行的任务，并且可以在不阻塞主线程的情况下完成。例如，网络请求、setTimeout和setInterval都是异步任务。

事件循环

事件循环是JavaScript用来管理任务执行的一个机制。它是一个无限循环，不断检查是否有新的任务需要执行。如果主线程上有同步任务需要执行，则事件循环会立即执行该任务。如果主线程上没有同步任务需要执行，则事件循环会检查是否有异步任务需要执行。如果有异步任务需要执行，则事件循环会将该任务放入一个队列中，并在主线程空闲时执行该任务。

回调

回调是处理异步任务的一种常见方式。回调函数是一个在异步任务完成后执行的函数。当异步任务完成时，JavaScript引擎会调用回调函数，并将异步任务的结果作为参数传递给回调函数。

以下是一个使用回调函数处理异步任务的示例：

function makeRequest(url, callback) {
  // 创建一个新的XMLHttpRequest对象
  const xhr = new XMLHttpRequest();

  // 设置请求的URL
  xhr.open('GET', url);

  // 设置请求的回调函数
  xhr.onload = function() {
    // 当请求完成时，调用回调函数
    callback(xhr.responseText);
  };

  // 发送请求
  xhr.send();
}

// 调用makeRequest函数，并传入回调函数
makeRequest('https://example.com/api/v1/users', function(response) {
  // 在回调函数中处理异步任务的结果
  console.log(response);
});

Promise

Promise是处理异步任务的另一种方式。Promise是一个对象，它表示一个异步操作的结果。Promise可以处于三种状态之一：

未完成：异步操作尚未完成。
已完成：异步操作已完成，并且成功。
已拒绝：异步操作已完成，并且失败。

可以使用then方法来处理Promise。then方法接受两个参数：一个成功的回调函数和一个失败的回调函数。当Promise完成时，JavaScript引擎会调用相应的回调函数。

以下是一个使用Promise处理异步任务的示例：

function makeRequest(url) {
  // 创建一个新的Promise对象
  const promise = new Promise(function(resolve, reject) {
    // 创建一个新的XMLHttpRequest对象
    const xhr = new XMLHttpRequest();

    // 设置请求的URL
    xhr.open('GET', url);

    // 设置请求的回调函数
    xhr.onload = function() {
      // 当请求完成时，调用回调函数
      if (xhr.status === 200) {
        // 如果请求成功，则调用resolve函数，并将请求的结果作为参数传递给resolve函数
        resolve(xhr.responseText);
      } else {
        // 如果请求失败，则调用reject函数，并将错误信息作为参数传递给reject函数
        reject(new Error('Request failed'));
      }
    };

    // 发送请求
    xhr.send();
  });

  // 返回Promise对象
  return promise;
}

// 调用makeRequest函数，并使用then方法处理Promise
makeRequest('https://example.com/api/v1/users').then(function(response) {
  // 在成功的回调函数中处理异步任务的结果
  console.log(response);
}, function(error) {
  // 在失败的回调函数中处理错误信息
  console.error(error);
});

async/await

async/await是处理异步任务的又一种方式。async/await是ES8中引入的语法，它使我们能够以同步的方式编写异步代码。

要使用async/await，首先需要定义一个async函数。async函数是一个可以包含await表达式的函数。await表达式是一个暂停async函数执行的表达式，直到异步操作完成。

以下是一个使用async/await处理异步任务的示例：

async function makeRequest(url) {
  // 创建一个新的XMLHttpRequest对象
  const xhr = new XMLHttpRequest();

  // 设置请求的URL
  xhr.open('GET', url);

  // 发送请求
  xhr.send();

  // 等待请求完成
  const response = await xhr.onload;

  // 返回请求的结果
  return response;
}

// 调用makeRequest函数
const response = await makeRequest('https://example.com/api/v1/users');

// 处理异步任务的结果
console.log(response);