现代JavaScript中的异步编程演进：从回调到Async/Await-IJ笔记

现代JavaScript中的异步编程演进：从回调到Async/Await

在JavaScript的发展历程中，异步编程一直是开发者面临的核心挑战之一。从早期的回调地狱到如今的Async/Await，JavaScript的异步编程模型经历了显著的演进。本文将深入探讨这一演进过程，并提供实用的代码示例。

1. 回调函数时代

在ES6之前，回调函数是处理异步操作的主要方式。虽然简单直接，但嵌套的回调容易导致”回调地狱”。

// 传统的回调模式 function fetchData(callback) {     setTimeout(() => {         callback('Data loaded');     }, 1000); }  fetchData((result) => {     console.log(result);     // 嵌套回调     fetchData((result2) => {         console.log(result2);         // 更深层的嵌套...     }); });

2. Promise的引入

ES6引入了Promise，为异步操作提供了更优雅的解决方案。Promise代表一个异步操作的最终完成（或失败）及其结果值。

// 使用Promise function fetchDataPromise() {     return new Promise((resolve, reject) => {         setTimeout(() => {             resolve('Data loaded with Promise');         }, 1000);     }); }  fetchDataPromise()     .then(result => {         console.log(result);         return fetchDataPromise();     })     .then(result => {         console.log(result);     })     .catch(error => {         console.error('Error:', error);     });

3. Async/Await的革命

ES2017引入的Async/Await让异步代码看起来像同步代码，极大地提高了可读性。

// 使用Async/Await async function loadData() {     try {         const result1 = await fetchDataPromise();         console.log(result1);                  const result2 = await fetchDataPromise();         console.log(result2);                  // 并行执行多个异步操作         const [data1, data2] = await Promise.all([             fetchDataPromise(),             fetchDataPromise()         ]);         console.log('Parallel results:', data1, data2);     } catch (error) {         console.error('Error in async function:', error);     } }  loadData();

4. 现代最佳实践

结合现代JavaScript特性，我们可以写出更优雅的异步代码：

// 使用fetch API和Async/Await async function fetchUserData(userId) {     try {         const response = await fetch(`https://api.example.com/users/${userId}`);         if (!response.ok) {             throw new Error(`HTTP error! status: ${response.status}`);         }         const userData = await response.json();                  // 并行获取用户的其他数据         const [posts, comments] = await Promise.all([             fetch(`https://api.example.com/users/${userId}/posts`).then(r => r.json()),             fetch(`https://api.example.com/users/${userId}/comments`).then(r => r.json())         ]);                  return {             user: userData,             posts,             comments         };     } catch (error) {         console.error('Failed to fetch user data:', error);         throw error;     } }  // 使用示例 fetchUserData(123)     .then(data => console.log('User data:', data))     .catch(error => console.error('Error:', error));

5. 错误处理策略

良好的错误处理是异步编程的关键：

// 错误处理的最佳实践 async function robustAsyncOperation() {     // 方法1：try-catch块     try {         const result = await someAsyncFunction();         return result;     } catch (error) {         // 记录错误并返回默认值         console.error('Operation failed:', error);         return { error: true, message: error.message };     } }  // 方法2：使用.catch()链 async function alternativeErrorHandling() {     const result = await someAsyncFunction()         .catch(error => {             // 转换错误或提供默认值             return { fallback: 'default value' };         });     return result; }  // 方法3：包装函数 function withRetry(asyncFn, maxRetries = 3) {     return async function(...args) {         for (let i = 0; i < maxRetries; i++) {             try {                 return await asyncFn(...args);             } catch (error) {                 if (i === maxRetries - 1) throw error;                 console.log(`Retry ${i + 1} failed, retrying...`);                 await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));             }         }     }; }

6. 性能优化技巧

// 1. 并行执行不相关的异步操作 async function optimizePerformance() {     // 错误的顺序执行     // const user = await getUser();     // const posts = await getPosts();     // const comments = await getComments();          // 正确的并行执行     const [user, posts, comments] = await Promise.all([         getUser(),         getPosts(),         getComments()     ]);          return { user, posts, comments }; }  // 2. 使用Promise.allSettled处理部分失败 async function handlePartialFailures() {     const promises = [         fetch('https://api.example.com/data1'),         fetch('https://api.example.com/data2'),         fetch('https://api.example.com/data3')     ];          const results = await Promise.allSettled(promises);          const successful = results         .filter(result => result.status === 'fulfilled')         .map(result => result.value);          const failed = results         .filter(result => result.status === 'rejected')         .map(result => result.reason);          console.log(`Success: ${successful.length}, Failed: ${failed.length}`); }  // 3. 使用AbortController取消请求 async function cancellableFetch() {     const controller = new AbortController();     const signal = controller.signal;          // 设置超时取消     const timeoutId = setTimeout(() => controller.abort(), 5000);          try {         const response = await fetch('https://api.example.com/slow-data', { signal });         clearTimeout(timeoutId);         return await response.json();     } catch (error) {         if (error.name === 'AbortError') {             console.log('Request was aborted due to timeout');         } else {             console.error('Fetch error:', error);         }         throw error;     } }