9.JS学习篇-async / await

在前端开发中，async/await是一种用于处理异步操作的语法糖，它使得异步代码看起来更像同步代码，从而提高了代码的可读性和可维护性。

1.基本语法

1.async函数

• 使用async关键字定义一个异步函数。异步函数会返回一个 Promise 对象。

   async function fetchData() {
      // 异步操作代码
   }

2.await表达式

• 在异步函数中，可以使用await关键字等待一个 Promise 对象的解决。await表达式会暂停函数的执行，直到 Promise 对象被解决。

     async function fetchData() {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       return data;
     }

2.工作原理

1.Promise 对象的自动处理

• 当在异步函数中使用await关键字等待一个 Promise 对象时，JavaScript 引擎会自动处理这个 Promise 对象。如果 Promise 对象被解决，await表达式会返回解决的值；如果 Promise 对象被拒绝，await表达式会抛出一个错误。

2.错误处理

• 可以使用try/catch语句来处理异步函数中的错误。如果在异步函数中抛出一个错误，错误会被catch块捕获。

    async function fetchData() {
       try {
         const response = await fetch('https://api.example.com/data');
         const data = await response.json();
         return data;
       } catch (error) {
         console.error('Error fetching data:', error);
       }
     }

3.实际应用场景

1.异步数据获取

• 在前端开发中，经常需要从服务器获取数据。使用async/await可以使异步数据获取的代码更加简洁和易读。

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

2.异步操作的顺序执行

• 有时候需要按照特定的顺序执行多个异步操作。使用async/await可以轻松地实现异步操作的顺序执行。

    async function performTasks() {
       await task1();
       await task2();
       await task3();
     }

3.错误处理和重试逻辑

• 在处理异步操作时，可能会遇到错误。使用async/await可以方便地实现错误处理和重试逻辑。

  async function fetchWithRetry() {
       let retries = 3;
       while (retries > 0) {
         try {
           const response = await fetch('https://api.example.com/data');
           const data = await response.json();
           return data;
         } catch (error) {
           console.error('Error fetching data. Retrying...');
           retries--;
         }
       }
       throw new Error('Failed to fetch data after multiple retries.');
     }
  

4.优势和注意事项

1.优势

• 提高代码的可读性：async/await使得异步代码看起来更像同步代码，更容易理解和维护。
• 错误处理更加方便：可以使用try/catch语句来处理异步函数中的错误，而不需要使用 Promise 的.then()和.catch()方法。
• 更好的调试体验：在调试异步代码时，使用async/await可以更容易地跟踪代码的执行流程。

2.注意事项

• async/await只能在异步函数中使用。如果在普通函数中使用await关键字，会抛出一个语法错误。
• await表达式会暂停函数的执行，直到 Promise 对象被解决。因此，如果在一个长时间运行的异步操作中使用await，可能会导致函数的执行被阻塞，影响用户体验。在这种情况下，可以考虑使用异步迭代器或Promise.all()等方法来并行执行多个异步操作。
• 总之，async/await是一种非常有用的语法糖，它可以使异步代码更加简洁、易读和可维护。在前端开发中，合理地使用async/await可以提高开发效率和代码质量。