JS 开启异步执行|极客笔记

JS 开启异步执行

在编写JavaScript代码时，我们经常需要处理一些耗时操作或需要等待某些条件满足后才能继续执行下一步。为了避免阻塞主线程，我们可以使用异步执行的方式来处理这些情况，确保页面的流畅性和用户体验。

什么是异步执行

在传统的同步执行模式下，代码会按照顺序依次执行，一个任务完成后才会执行下一个任务。而在异步执行模式下，代码会在遇到需要耗时操作或需要等待的情况时，先将这部分任务放到一个队列中，继续执行后面的代码。当这些异步任务完成时，会通知主线程执行相应的回调函数。

异步执行的好处在于可以提高页面的响应速度，避免阻塞主线程导致页面卡顿。常见的异步执行方式包括回调函数、Promise、async/await等。

使用回调函数实现异步执行

回调函数是最常见的异步执行方式，通过将需要异步执行的任务封装成一个函数，并在任务完成后执行一个回调函数来通知主线程。

function fetchData(callback) {
  setTimeout(() => {
    const data = '异步数据';
    callback(data);
  }, 1000);
}

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

fetchData(handleData);
console.log('开始异步操作');

上面的代码中，fetchData函数模拟了一个异步操作，1秒后返回一个数据。我们将handleData函数作为回调函数传入fetchData函数中，在数据返回后执行handleData函数来处理数据。

运行以上代码，将会得到如下的输出：

开始异步操作
异步数据

使用Promise实现异步执行

Promise是ES6中引入的异步编程解决方案，通过Promise对象我们可以更加优雅地处理异步任务。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '异步数据';
      resolve(data);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data);
});
console.log('开始异步操作');

上面的代码中，我们将异步操作封装成一个Promise对象，并在操作完成后调用resolve方法传递数据。通过then方法我们可以在异步操作完成后执行相应的回调函数。

运行以上代码，将会得到如下的输出：

开始异步操作
异步数据

使用async/await实现异步执行

async/await是ES7中引入的异步编程方式，它提供了一种更加简洁的语法来处理异步任务。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '异步数据';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data);
}

getData();
console.log('开始异步操作');

上面的代码中，getData函数前面有async关键字修饰，表明这是一个异步函数。在函数体内部，我们将异步操作fetchData使用await关键字来等待数据返回。当数据返回后，会继续执行后面的代码。

运行以上代码，将会得到如下的输出：