JavaScript中的异步大集合 | 七日打卡

2023-10-25 14:35:51

回调函数

回调函数是异步编程中最基本的一种方式。当一个异步操作完成时，它会调用一个预先定义好的函数，这个函数就是回调函数。例如，以下代码使用回调函数来处理 Ajax 请求：

function makeAjaxRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

makeAjaxRequest('https://example.com/api/data', function(data) {
  console.log(data);
});

Promise

Promise 是 ES6 中引入的一种新的异步编程方式。它提供了一个更简洁、更易读的语法来处理异步操作。一个 Promise 对象表示一个异步操作的结果，它可以处于三种状态：pending、fulfilled 和 rejected。

以下代码使用 Promise 来处理 Ajax 请求：

function makeAjaxRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.send();
  });
}

makeAjaxRequest('https://example.com/api/data')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

async/await

async/await 是 ES8 中引入的一种新的异步编程方式。它允许我们使用同步的语法来编写异步代码，从而使代码更加清晰、易读。

以下代码使用 async/await 来处理 Ajax 请求：

async function makeAjaxRequest(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

makeAjaxRequest('https://example.com/api/data')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Generator

Generator 是 ES6 中引入的一种新的函数类型。它允许我们编写可暂停和恢复的函数，从而可以更方便地处理异步操作。

以下代码使用 Generator 来处理 Ajax 请求：

function* makeAjaxRequest(url) {
  const response = yield fetch(url);
  const data = yield response.json();
  return data;
}

const generator = makeAjaxRequest('https://example.com/api/data');

generator.next().value
  .then(data => {
    generator.next(data).value
      .then(data => {
        console.log(data);
      });
  });

Event Loop 和微任务

Event Loop 和微任务是 JavaScript 运行时环境中的两个重要概念。Event Loop 是一个不断循环的事件队列，它负责处理事件和任务。微任务是比事件优先级更高的任务，它们会在 Event Loop 的每次循环中优先执行。

以下代码演示了 Event Loop 和微任务的工作原理：

console.log('1');

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

Promise.resolve().then(() => {
  console.log('2');
});

console.log('4');

输出结果为：

在上面的代码中，console.log('1') 和 console.log('4') 是同步任务，它们会在 Event Loop 的当前循环中立即执行。setTimeout(() => { console.log('3'); }, 0) 是一个异步任务，它会在 Event Loop 的下一次循环中执行。Promise.resolve().then(() => { console.log('2'); }) 是一个微任务，它会在 Event Loop 的当前循环中执行，但会在 setTimeout(() => { console.log('3'); }, 0) 之前执行。因此，输出结果为 1、2、4、3。