深入浅出探究JavaScript中的async与await

什么是async/await

在ES7中，JavaScript引入了async/await关键字，用于解决异步编程的问题。async表示函数是异步的，并且它总是返回一个promise，而await表示需要等待promise对象返回结果，然后再继续执行后面的代码。

如何使用async/await

在使用async/await时，我们需要将异步函数用async关键字声明，然后使用await等待异步操作完成：

async function testAsync() {
  let result = await getAsyncResult();
  console.log(result);
}

testAsync();

上面的代码中，testAsync()函数是一个异步函数，它通过await关键字等待getAsyncResult()函数的返回结果。

async/await的示例

示例1：使用async/await进行异步操作

async function asyncFunc() {
  //等待3秒钟
  await new Promise(resolve => {
    setTimeout(resolve, 3000);
  });

  //返回一个字符串
  return "Hello World";
}

asyncFunc().then(result => {
  console.log(result); //输出"Hello World"
});

在上面的示例中，asyncFunc()函数用async关键字声明，我们使用await等待3秒钟，然后返回一个字符串"Hello World"。我们调用asyncFunc()函数后，使用then()方法获取返回结果并输出。

示例2：使用Promise.all配合async/await实现并行异步操作

async function asyncTask1() {
  await new Promise(resolve => {
    setTimeout(() => {
      console.log("task1 finished");
      resolve();
    }, 3000);
  });
}

async function asyncTask2() {
  await new Promise(resolve => {
    setTimeout(() => {
      console.log("task2 finished");
      resolve();
    }, 2000);
  });
}

async function main() {
  await Promise.all([asyncTask1(), asyncTask2()]);
  console.log("all tasks finished");
}

main();

在上面的示例中，我们定义了2个异步任务asyncTask1和asyncTask2，它们分别需要等待3秒钟和2秒钟。在main()函数中，我们使用Promise.all()方法等待这两个异步任务的完成，然后再输出"all tasks finished"。这是一个并行异步操作示例，可以加速异步操作的完成。

总结

async/await关键字是JavaScript中解决异步编程问题的一种有效方式，它通过将异步函数返回promise对象进行封装，使用await关键字等待promise对象的结果，以实现简单、清晰的异步编程。能够灵活运用async/await关键字可以提升我们的JavaScript编程技能。