💫 回调套回调写到崩溃，异步编程其实可以很优雅

🎯 学习目标：掌握5个JavaScript异步编程高级技巧，告别回调地狱，写出优雅的异步代码

📊 难度等级 ：中级

🏷️ 技术标签 ：#JavaScript #异步编程 #Promise #async/await

⏱️ 阅读时间：约6分钟

---

🌟 引言

在日常的JavaScript开发中，你是否遇到过这样的困扰：

• 回调地狱：callback套callback，代码嵌套层级深到怀疑人生
• 异步错误处理：try-catch捕获不到Promise错误，调试困难
• 并发控制难题：同时发起100个请求导致服务器压力过大
• 异步任务取消：用户快速切换页面，之前的请求还在执行

今天分享5个JavaScript异步编程的高级技巧，让你的异步代码优雅如诗，告别回调地狱的噩梦！

---

💡 核心技巧详解

1. Promise.allSettled()：优雅处理批量异步任务

🔍 应用场景

需要同时执行多个异步任务，即使部分任务失败也要获取所有结果

❌ 常见问题

使用Promise.all()时，一个任务失败就会导致整个批次失败

// ❌ 传统写法：一个失败全部失败
const fetchUserData = async () => {
  try {
    const results = await Promise.all([
      fetch('/api/user/profile'),
      fetch('/api/user/orders'),
      fetch('/api/user/favorites')
    ]);
    // 如果任何一个请求失败，这里都不会执行
    return results;
  } catch (error) {
    console.error('所有请求都失败了:', error);
  }
};

✅ 推荐方案

使用Promise.allSettled()获取所有任务的执行结果

/**
 * 批量获取用户数据
 * @description 使用Promise.allSettled处理批量异步任务，获取所有结果
 * @returns {Promise<Object>} 包含成功和失败结果的对象
 */
const fetchUserDataSafely = async () => {
  const tasks = [
    fetch('/api/user/profile').then(res => res.json()),
    fetch('/api/user/orders').then(res => res.json()),
    fetch('/api/user/favorites').then(res => res.json())
  ];

  const results = await Promise.allSettled(tasks);
  
  const successResults = [];
  const failedResults = [];
  
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      successResults.push({
        index,
        data: result.value
      });
    } else {
      failedResults.push({
        index,
        error: result.reason
      });
    }
  });
  
  return {
    success: successResults,
    failed: failedResults,
    total: results.length
  };
};

💡 核心要点

• 容错性强：部分任务失败不影响其他任务
• 结果完整：能获取到所有任务的执行状态
• 便于调试：清楚知道哪些任务成功，哪些失败

🎯 实际应用

在Vue3组件中的应用示例

// Vue3组合式API中的应用
import { ref, onMounted } from 'vue';

/**
 * 用户数据管理组合函数
 * @description 管理用户相关的多个数据源
 * @returns {Object} 响应式数据和方法
 */
const useUserData = () => {
  const userProfile = ref(null);
  const userOrders = ref([]);
  const userFavorites = ref([]);
  const loading = ref(false);
  const errors = ref([]);

  const loadUserData = async () => {
    loading.value = true;
    errors.value = [];
    
    const result = await fetchUserDataSafely();
    
    // 处理成功的结果
    result.success.forEach(({ index, data }) => {
      switch (index) {
        case 0: userProfile.value = data; break;
        case 1: userOrders.value = data; break;
        case 2: userFavorites.value = data; break;
      }
    });
    
    // 记录失败的请求
    errors.value = result.failed;
    loading.value = false;
  };

  return {
    userProfile,
    userOrders,
    userFavorites,
    loading,
    errors,
    loadUserData
  };
};

---

2. async/await错误处理：告别try-catch嵌套地狱

🔍 应用场景

需要处理多层异步调用的错误，避免try-catch嵌套过深

❌ 常见问题

多层try-catch嵌套，代码可读性差

// ❌ 嵌套地狱
const processUserOrder = async (userId) => {
  try {
    const user = await fetchUser(userId);
    try {
      const orders = await fetchUserOrders(user.id);
      try {
        const processedOrders = await processOrders(orders);
        return processedOrders;
      } catch (processError) {
        console.error('处理订单失败:', processError);
      }
    } catch (orderError) {
      console.error('获取订单失败:', orderError);
    }
  } catch (userError) {
    console.error('获取用户失败:', userError);
  }
};

✅ 推荐方案

使用统一的错误处理包装器

/**
 * 异步函数错误处理包装器
 * @description 将异步函数包装，返回[error, data]格式的结果
 * @param {Promise} promise - 要执行的异步函数
 * @returns {Promise<Array>} [error, data]格式的结果
 */
const to = (promise) => {
  return promise
    .then(data => [null, data])
    .catch(error => [error, null]);
};

/**
 * 处理用户订单
 * @description 使用统一错误处理的用户订单处理流程
 * @param {string} userId - 用户ID
 * @returns {Promise<Object|null>} 处理结果或null
 */
const processUserOrderSafely = async (userId) => {
  // 获取用户信息
  const [userError, user] = await to(fetchUser(userId));
  if (userError) {
    console.error('获取用户失败:', userError.message);
    return null;
  }

  // 获取用户订单
  const [orderError, orders] = await to(fetchUserOrders(user.id));
  if (orderError) {
    console.error('获取订单失败:', orderError.message);
    return null;
  }

  // 处理订单
  const [processError, processedOrders] = await to(processOrders(orders));
  if (processError) {
    console.error('处理订单失败:', processError.message);
    return null;
  }

  return processedOrders;
};

💡 核心要点

• 代码扁平化：避免多层嵌套的try-catch
• 错误类型明确：每个步骤的错误都能精确定位
• 函数式风格：错误处理更加函数式和优雅

🎯 实际应用

在表单提交中的应用

/**
 * 表单提交处理
 * @description 处理复杂的表单提交流程
 * @param {Object} formData - 表单数据
 * @returns {Promise<Object>} 提交结果
 */
const submitForm = async (formData) => {
  // 验证表单
  const [validateError, validatedData] = await to(validateFormData(formData));
  if (validateError) {
    return { success: false, error: '表单验证失败', details: validateError };
  }

  // 上传文件
  const [uploadError, uploadResult] = await to(uploadFiles(validatedData.files));
  if (uploadError) {
    return { success: false, error: '文件上传失败', details: uploadError };
  }

  // 提交数据
  const [submitError, submitResult] = await to(submitFormData({
    ...validatedData,
    fileUrls: uploadResult.urls
  }));
  if (submitError) {
    return { success: false, error: '数据提交失败', details: submitError };
  }

  return { success: true, data: submitResult };
};

---

3. 异步迭代器：优雅处理大数据流

🔍 应用场景

需要处理大量数据或分页数据，避免一次性加载过多内容

❌ 常见问题

一次性加载所有数据，内存占用过大

// ❌ 一次性加载所有数据
const loadAllUsers = async () => {
  const allUsers = [];
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    const response = await fetch(`/api/users?page=${page}`);
    const data = await response.json();
    allUsers.push(...data.users);
    hasMore = data.hasMore;
    page++;
  }
  
  return allUsers; // 可能非常大的数组
};

✅ 推荐方案

使用异步迭代器按需加载数据

/**
 * 用户数据异步迭代器
 * @description 创建用户数据的异步迭代器，支持按需加载
 * @param {number} pageSize - 每页数据量
 * @returns {AsyncIterator} 异步迭代器
 */
const createUserIterator = (pageSize = 20) => {
  let currentPage = 1;
  let hasMore = true;

  return {
    [Symbol.asyncIterator]() {
      return this;
    },

    async next() {
      if (!hasMore) {
        return { done: true };
      }

      try {
        const response = await fetch(`/api/users?page=${currentPage}&size=${pageSize}`);
        const data = await response.json();
        
        hasMore = data.hasMore;
        currentPage++;
        
        return {
          done: false,
          value: {
            users: data.users,
            page: currentPage - 1,
            total: data.total
          }
        };
      } catch (error) {
        hasMore = false;
        throw error;
      }
    }
  };
};

/**
 * 处理用户数据
 * @description 使用异步迭代器处理用户数据
 * @returns {Promise<void>}
 */
const processUsers = async () => {
  const userIterator = createUserIterator(50);
  
  for await (const batch of userIterator) {
    console.log(`处理第${batch.page}页，共${batch.users.length}个用户`);
    
    // 处理当前批次的用户
    await processBatchUsers(batch.users);
    
    // 可以在这里添加延迟，避免请求过于频繁
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  
  console.log('所有用户处理完成');
};

💡 核心要点

• 内存友好：按需加载，不会占用过多内存
• 可控制性：可以随时中断迭代过程
• 标准化：使用标准的异步迭代器协议

🎯 实际应用

在Vue3组件中实现无限滚动

/**
 * 无限滚动组合函数
 * @description 实现无限滚动加载功能
 * @param {Function} fetchFunction - 数据获取函数
 * @returns {Object} 响应式数据和方法
 */
const useInfiniteScroll = (fetchFunction) => {
  const items = ref([]);
  const loading = ref(false);
  const hasMore = ref(true);
  const error = ref(null);

  const iterator = createUserIterator();

  const loadMore = async () => {
    if (loading.value || !hasMore.value) return;
    
    loading.value = true;
    error.value = null;
    
    try {
      const result = await iterator.next();
      
      if (result.done) {
        hasMore.value = false;
      } else {
        items.value.push(...result.value.users);
      }
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  return {
    items,
    loading,
    hasMore,
    error,
    loadMore
  };
};

---

4. AbortController：优雅取消异步请求

🔍 应用场景

用户快速切换页面或取消操作时，需要取消正在进行的异步请求

❌ 常见问题

无法取消已发起的请求，可能导致内存泄漏或状态错乱

// ❌ 无法取消的请求
const searchUsers = async (keyword) => {
  const response = await fetch(`/api/search?q=${keyword}`);
  return response.json();
  // 如果用户快速输入，之前的请求无法取消
};

✅ 推荐方案

使用AbortController管理请求生命周期

/**
 * 可取消的搜索函数
 * @description 创建可以被取消的搜索请求
 * @param {string} keyword - 搜索关键词
 * @param {AbortSignal} signal - 取消信号
 * @returns {Promise<Object>} 搜索结果
 */
const searchUsersWithCancel = async (keyword, signal) => {
  try {
    const response = await fetch(`/api/search?q=${keyword}`, {
      signal // 传入取消信号
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('搜索请求被取消');
      return null;
    }
    throw error;
  }
};

/**
 * 搜索管理器
 * @description 管理搜索请求的生命周期
 */
class SearchManager {
  constructor() {
    this.currentController = null;
  }

  /**
   * 执行搜索
   * @param {string} keyword - 搜索关键词
   * @returns {Promise<Object|null>} 搜索结果
   */
  async search(keyword) {
    // 取消之前的请求
    this.cancelPrevious();
    
    // 创建新的控制器
    this.currentController = new AbortController();
    
    try {
      const result = await searchUsersWithCancel(keyword, this.currentController.signal);
      this.currentController = null;
      return result;
    } catch (error) {
      this.currentController = null;
      throw error;
    }
  }

  /**
   * 取消当前请求
   */
  cancelPrevious() {
    if (this.currentController) {
      this.currentController.abort();
      this.currentController = null;
    }
  }
}

💡 核心要点

• 资源管理：及时取消无用的请求，节省带宽
• 状态一致：避免过期请求的结果覆盖新请求
• 用户体验：响应用户的取消操作

🎯 实际应用

在Vue3搜索组件中的应用

/**
 * 搜索组合函数
 * @description 实现带取消功能的搜索
 * @returns {Object} 响应式数据和方法
 */
const useSearch = () => {
  const searchResults = ref([]);
  const loading = ref(false);
  const error = ref(null);
  const searchManager = new SearchManager();

  const search = async (keyword) => {
    if (!keyword.trim()) {
      searchResults.value = [];
      return;
    }

    loading.value = true;
    error.value = null;

    try {
      const results = await searchManager.search(keyword);
      if (results) { // 检查请求是否被取消
        searchResults.value = results;
      }
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  // 防抖搜索
  const debouncedSearch = debounce(search, 300);

  // 组件卸载时取消请求
  onUnmounted(() => {
    searchManager.cancelPrevious();
  });

  return {
    searchResults,
    loading,
    error,
    search: debouncedSearch,
    cancelSearch: () => searchManager.cancelPrevious()
  };
};

---

5. 并发控制：限制同时执行的异步任务数量

🔍 应用场景

需要处理大量异步任务，但要控制并发数量避免服务器压力过大

❌ 常见问题

同时发起过多请求，导致服务器压力大或浏览器卡顿

// ❌ 无控制的并发请求
const uploadFiles = async (files) => {
  const promises = files.map(file => uploadSingleFile(file));
  return Promise.all(promises); // 可能同时上传100个文件
};

✅ 推荐方案

实现并发控制器限制同时执行的任务数量

/**
 * 并发控制器
 * @description 控制异步任务的并发执行数量
 */
class ConcurrencyController {
  /**
   * 构造函数
   * @param {number} limit - 最大并发数
   */
  constructor(limit = 3) {
    this.limit = limit;
    this.running = 0;
    this.queue = [];
  }

  /**
   * 添加任务到队列
   * @param {Function} task - 要执行的异步任务
   * @returns {Promise} 任务执行结果
   */
  async add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({
        task,
        resolve,
        reject
      });
      this.process();
    });
  }

  /**
   * 处理队列中的任务
   */
  async process() {
    if (this.running >= this.limit || this.queue.length === 0) {
      return;
    }

    this.running++;
    const { task, resolve, reject } = this.queue.shift();

    try {
      const result = await task();
      resolve(result);
    } catch (error) {
      reject(error);
    } finally {
      this.running--;
      this.process(); // 继续处理下一个任务
    }
  }
}

/**
 * 受控的文件上传
 * @description 使用并发控制器上传文件
 * @param {Array} files - 文件列表
 * @param {number} concurrency - 并发数量
 * @returns {Promise<Array>} 上传结果
 */
const uploadFilesWithControl = async (files, concurrency = 3) => {
  const controller = new ConcurrencyController(concurrency);
  const uploadTasks = files.map(file => 
    () => uploadSingleFile(file) // 注意：返回函数，而不是直接执行
  );

  const results = [];
  const errors = [];

  for (let i = 0; i < uploadTasks.length; i++) {
    try {
      const result = await controller.add(uploadTasks[i]);
      results.push({ index: i, result });
    } catch (error) {
      errors.push({ index: i, error });
    }
  }

  return { results, errors };
};

💡 核心要点

• 资源保护：避免同时发起过多请求
• 性能优化：合理利用网络和计算资源
• 错误隔离：单个任务失败不影响其他任务

🎯 实际应用

批量数据处理的实际应用

/**
 * 批量数据处理组合函数
 * @description 处理大量数据的批量操作
 * @param {Array} items - 要处理的数据项
 * @param {Function} processor - 处理函数
 * @param {number} concurrency - 并发数
 * @returns {Object} 响应式数据和方法
 */
const useBatchProcessor = (items, processor, concurrency = 3) => {
  const progress = ref(0);
  const completed = ref([]);
  const failed = ref([]);
  const processing = ref(false);

  const process = async () => {
    processing.value = true;
    progress.value = 0;
    completed.value = [];
    failed.value = [];

    const controller = new ConcurrencyController(concurrency);
    const total = items.length;

    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      
      try {
        const result = await controller.add(() => processor(item));
        completed.value.push({ item, result });
      } catch (error) {
        failed.value.push({ item, error });
      }
      
      progress.value = Math.round(((i + 1) / total) * 100);
    }

    processing.value = false;
  };

  return {
    progress,
    completed,
    failed,
    processing,
    process
  };
};

---

📊 技巧对比总结

技巧	使用场景	优势	注意事项
Promise.allSettled()	批量异步任务	容错性强，结果完整	需要手动处理失败结果
统一错误处理	多层异步调用	代码扁平化，错误明确	需要包装现有函数
异步迭代器	大数据流处理	内存友好，可控制	实现相对复杂
AbortController	请求取消	资源管理，状态一致	需要手动管理生命周期
并发控制	大量并发任务	资源保护，性能优化	需要合理设置并发数

---

🎯 实战应用建议

最佳实践

1. 错误处理策略：根据业务场景选择合适的错误处理方式
2. 并发控制：根据服务器性能和网络状况调整并发数
3. 内存管理：处理大数据时优先考虑流式处理
4. 用户体验：提供取消操作和进度反馈
5. 代码组织：将异步逻辑封装成可复用的组合函数

性能考虑

• 网络优化：合理控制并发请求数量
• 内存优化：使用异步迭代器处理大数据
• 用户体验：及时取消无用的请求
• 错误恢复：提供重试机制和降级方案

---

💡 总结

这5个JavaScript异步编程技巧能让你的代码更加优雅和健壮：

1. Promise.allSettled()：批量任务的容错处理
2. 统一错误处理：告别try-catch嵌套地狱
3. 异步迭代器：优雅处理大数据流
4. AbortController：请求生命周期管理
5. 并发控制：资源保护和性能优化

掌握这些技巧，你就能写出既优雅又高效的异步代码，彻底告别回调地狱的噩梦！

---

🔗 相关资源

• Promise.allSettled() - MDN
• AbortController - MDN
• 异步迭代器 - MDN
• Vue3 Composition API

---

💡 今日收获：掌握了5个JavaScript异步编程高级技巧，这些知识点能让异步代码更加优雅和可维护。

如果这篇文章对你有帮助，欢迎点赞、收藏和分享！有任何问题也欢迎在评论区讨论。 🚀