异步编程之async await详解，边看边练，纵享丝滑

前端

2024-01-24 04:47:36

前言

如果你之前跟我一样一直对async和await熟悉又陌生的话（熟悉是可能每天都在用，陌生是针对一些组合题又丈二和尚摸不着头脑），不妨可以边看边练，总结规律，相信会逐渐清晰并有所得。

本文对每个案例进行详细的分析和讲解，让你深入理解async和await的原理和用法。通过综合练习，你可以巩固所学知识，加深对异步编程的理解，并能够灵活运用到实际开发中。

一、基础概念

异步编程： 异步编程是一种编程范式，它允许一个函数在不阻塞调用线程的情况下执行。这意味着函数可以继续执行，而无需等待其他函数或操作完成。
async函数： async函数是一种特殊的函数，它可以异步执行。async函数返回一个Promise对象，该对象代表了函数的最终结果。
await await用于等待async函数的最终结果。当await一个async函数时，当前函数会被暂停，直到async函数的最终结果返回。
协程： 协程是一种轻量级的线程，它可以被暂停和恢复。协程可以用来编写异步代码，而无需使用线程或回调函数。
并发： 并发是指多个任务同时执行。异步编程可以实现并发，因为它允许一个函数在不阻塞调用线程的情况下执行。
性能： 异步编程可以提高应用程序的性能，因为它允许应用程序在不阻塞调用线程的情况下执行任务。这使得应用程序可以更好地利用系统的资源，并提高整体性能。
开发效率： 异步编程可以提高开发效率，因为它可以让你编写更简洁、更易读的代码。异步编程还可以帮助你避免回调函数地狱，从而使代码更易于维护。

二、案例分析

1. 简单async函数

async function myAsyncFunction() {
  return 'Hello, world!';
}

myAsyncFunction().then(result => {
  console.log(result); // 'Hello, world!'
});

在这个案例中，myAsyncFunction是一个async函数，它返回一个Promise对象。当调用myAsyncFunction()时，函数会被异步执行，而不会阻塞调用线程。当async函数执行完成时，Promise对象会被解析，并调用then()方法来处理结果。

2. await一个async函数

async function myAsyncFunction() {
  const result = await Promise.resolve('Hello, world!');
  return result;
}

myAsyncFunction().then(result => {
  console.log(result); // 'Hello, world!'
});

在这个案例中，myAsyncFunction是一个async函数，它使用await关键字等待Promise.resolve('Hello, world!')的最终结果。当调用myAsyncFunction()时，函数会被异步执行，而不会阻塞调用线程。当async函数执行完成时，Promise对象会被解析，并调用then()方法来处理结果。

3. 多个async函数

async function myFirstAsyncFunction() {
  return 'Hello, world!';
}

async function mySecondAsyncFunction() {
  return 'Goodbye, world!';
}

async function main() {
  const result1 = await myFirstAsyncFunction();
  const result2 = await mySecondAsyncFunction();

  console.log(result1); // 'Hello, world!'
  console.log(result2); // 'Goodbye, world!'
}

main();

在这个案例中，myFirstAsyncFunction和mySecondAsyncFunction都是async函数。main()函数也是一个async函数，它使用await关键字等待myFirstAsyncFunction()和mySecondAsyncFunction()的最终结果。当调用main()函数时，函数会被异步执行，而不会阻塞调用线程。当async函数执行完成时，Promise对象会被解析，并调用then()方法来处理结果。

4. try...catch与async函数

async function myAsyncFunction() {
  try {
    const result = await Promise.resolve('Hello, world!');
    return result;
  } catch (error) {
    console.error(error);
  }
}

myAsyncFunction().then(result => {
  console.log(result); // 'Hello, world!'
}).catch(error => {
  console.error(error);
});