无需再学习异步的纠结，这篇文章为你解答async + await的难题

前端

2023-11-21 05:57:48

异步编程：提升应用程序性能和响应速度

什么是异步编程？

异步编程是一种强大的技术，它允许应用程序在不阻塞主线程的情况下执行耗时的任务。这对于提高性能和响应速度至关重要，尤其是对于需要处理大量数据或执行复杂计算的应用程序。

JavaScript 中的异步编程

在 JavaScript 中，有几种实现异步编程的方法，包括回调函数、Promise 和 async/await。

回调函数

回调函数是一种传统的方法，它通过将回调函数作为参数传递给异步函数来实现。当异步操作完成后，将调用回调函数，并向其传递结果。

function getUserName(callback) {
  // 模拟异步操作
  setTimeout(() => {
    callback('John Doe');
  }, 1000);
}

getUserName((name) => {
  console.log(`Hello, ${name}!`);
});

Promise

Promise 是一种更现代的方法，它通过创建一个 Promise 对象来实现异步操作。当异步操作完成后，Promise 对象的状态会改变，并触发相应的回调函数。

function getUserName() {
  // 模拟异步操作
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('John Doe');
    }, 1000);
  });
}

getUserName().then((name) => {
  console.log(`Hello, ${name}!`);
});

async/await

async/await 是 ES8 中引入的新语法，它允许使用更简洁、更同步的语法编写异步代码。async 函数可以使用 await 暂停函数执行，直到异步操作完成。

async function getUserName() {
  // 模拟异步操作
  const name = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('John Doe');
    }, 1000);
  });

  return name;
}

getUserName().then((name) => {
  console.log(`Hello, ${name}!`);
});

有趣的异步编程挑战

并行任务执行器

可以使用 async/await 编写一个并行任务执行器，它可以同时执行多个异步任务。

async function parallelTasks() {
  const tasks = [
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 1');
      }, 1000);
    }),
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 2');
      }, 2000);
    }),
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 3');
      }, 3000);
    }),
  ];

  const results = await Promise.all(tasks);
  console.log(results); // ['Task 1', 'Task 2', 'Task 3']
}

parallelTasks();

串行任务执行器

可以使用 async/await 编写一个串行任务执行器，它可以一个接一个地执行异步任务。

async function serialTasks() {
  const tasks = [
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 1');
      }, 1000);
    }),
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 2');
      }, 2000);
    }),
    () => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Task 3');
      }, 3000);
    }),
  ];

  for (let task of tasks) {
    const result = await task();
    console.log(result); // 'Task 1', 'Task 2', 'Task 3'
  }
}

serialTasks();