JavaScript 异步生成器助手：精通流的创建与管理

多年来，JavaScript 中的异步编程已取得了显著发展。随着异步生成器 (Async Generators) 和异步迭代器 (Async Iterators) 的引入，开发者获得了处理异步数据流的强大工具。现在，JavaScript 异步生成器助手进一步增强了这些功能，提供了一种更简化、更具表现力的方式来创建、转换和管理异步数据流。本指南将探讨异步生成器助手的基础知识，深入研究其功能，并通过清晰的示例展示其实际应用。

理解异步生成器与迭代器

在深入研究异步生成器助手之前，理解异步生成器和异步迭代器的基本概念至关重要。

异步生成器

异步生成器 (Async Generator) 是一种可以暂停和恢复的函数，它异步地产生值。它允许您随时间生成一系列值，而不会阻塞主线程。异步生成器使用 async function* 语法定义。

示例：

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // 模拟异步操作
    yield i;
  }
}

// 用法
const sequence = generateSequence(1, 5);

异步迭代器

异步迭代器 (Async Iterator) 是一个提供 next() 方法的对象，该方法返回一个 promise，此 promise 会解析为一个包含序列中下一个值的对象以及一个表示序列是否已耗尽的 done 属性。异步迭代器使用 for await...of 循环进行消费。

示例：

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

异步生成器助手简介

异步生成器助手 (Async Generator Helpers) 是一组扩展异步生成器原型功能的方法。它们为操作异步数据流提供了便捷的方式，使代码更具可读性和可维护性。这些助手是惰性求值的，这意味着它们只在需要时才处理数据，这可以提高性能。

以下是常见的异步生成器助手（取决于 JavaScript 环境和 polyfill）：

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

异步生成器助手详解

1. `map()`

map() 助手通过应用一个提供的函数来转换异步序列中的每个值。它返回一个新的异步生成器，该生成器会产生转换后的值。

语法：

asyncGenerator.map(callback)

示例： 将数字流转换为它们的平方。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // 模拟异步操作
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

实际用例： 想象一下从多个 API 获取用户数据，并需要将数据转换为统一格式。map() 可用于异步地对每个用户对象应用转换函数。

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // 规范化用户数据格式
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

filter() 助手会创建一个新的异步生成器，它只产生原始序列中满足所提供条件的值。它允许您选择性地将值包含在结果流中。

语法：

asyncGenerator.filter(callback)

示例： 过滤一个数字流，只保留偶数。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

实际用例： 处理日志条目流，并根据其严重级别进行过滤。例如，只处理错误和警告。

async function* readLogFile(filePath) {
  // 模拟异步逐行读取日志文件
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

take() 助手会创建一个新的异步生成器，它只产生原始序列中的前 n 个值。这对于限制从一个可能是无限的或非常大的流中处理的项目数量非常有用。

语法：

asyncGenerator.take(n)

示例： 从一个数字流中获取前 3 个数字。

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

实际用例： 显示来自异步搜索 API 的前 5 条搜索结果。

async function* search(query) {
  // 模拟从 API 获取搜索结果
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

drop() 助手会创建一个新的异步生成器，它会跳过原始序列中的前 n 个值，并产生剩余的值。它与 take() 相反，可用于忽略流的初始部分。

语法：

asyncGenerator.drop(n)

示例： 从一个数字流中丢弃前 2 个数字。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

实际用例： 对从 API 检索到的大型数据集进行分页，跳过已显示的结果。

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // 模拟通过偏移量获取数据
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // 跳过前几页的项目

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// 使用示例
displayPage(2);

5. `flatMap()`

flatMap() 助手通过应用一个返回异步可迭代对象 (Async Iterable) 的函数来转换异步序列中的每个值。然后，它将生成的异步可迭代对象“扁平化”成一个单一的异步生成器。这对于将每个值转换为一个值流，然后将这些流合并起来非常有用。

语法：

asyncGenerator.flatMap(callback)

示例： 将句子流转换为单词流。

async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

实际用例： 获取多个博客文章的评论，并将它们合并到一个流中进行处理。

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // 模拟从 API 获取博客文章 ID
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // 模拟从 API 获取某篇博客文章的评论
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

reduce() 助手对一个累加器和异步生成器的每个值（从左到右）应用一个函数，以将其减少为单个值。这对于从异步流中聚合数据非常有用。

语法：

asyncGenerator.reduce(callback, initialValue)

示例： 计算流中数字的总和。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

实际用例： 计算一系列 API 调用的平均响应时间。

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Error fetching ${endpoint}: ${error}`);
      yield 0; // 或适当地处理错误
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Average response time: ${average} ms`);
}

7. `toArray()`

toArray() 助手会消费整个异步生成器，并返回一个 promise，该 promise 会解析为一个包含生成器产生的所有值的数组。当您需要将流中的所有值收集到一个数组中以便进一步处理时，这个方法非常有用。

语法：

asyncGenerator.toArray()

示例： 将流中的数字收集到一个数组中。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Number Array:', numberArray);
}

processNumbers();

实际用例： 将分页 API 中的所有项目收集到一个数组中，以便在客户端进行筛选或排序。

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // 根据 API 的分页限制进行调整

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // 没有更多数据
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Fetched ${itemsArray.length} items.`);
    // 可以对 `itemsArray` 进行进一步处理
}

8. `forEach()`

forEach() 助手为异步生成器中的每个值执行一次提供的函数。与其他助手不同，forEach() 不会返回新的异步生成器；它用于对每个值执行副作用操作。

语法：

asyncGenerator.forEach(callback)

示例： 将流中的每个数字记录到控制台。

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Number:', num);
  });
}

processNumbers();

实际用例： 在处理流数据的同时，向用户界面发送实时更新。

async function* fetchRealTimeData(dataSource) {
    //模拟获取实时数据（例如股价）。
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //模拟更新 UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // 实际更新 UI 的代码会放在这里。
  });
}

组合异步生成器助手构建复杂数据管道

异步生成器助手的真正威力在于它们可以被链接在一起以创建复杂的数据管道。这使您能够以简洁易读的方式对异步流执行多个转换和操作。

示例： 过滤一个数字流，只保留偶数，然后将它们平方，最后取前 3 个结果。

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

实际用例： 获取用户数据，根据位置筛选用户，转换其数据以仅包含相关字段，然后在地图上显示前 10 个用户。

async function* fetchUsers() {
  // 模拟从数据库或 API 获取用户
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// 使用示例：
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfill 和浏览器支持

对异步生成器助手的支持可能因 JavaScript 环境而异。如果您需要支持旧版浏览器或环境，可能需要使用 polyfill。Polyfill 通过用 JavaScript 实现缺失的功能来提供这些功能。有几个可用于异步生成器助手的 polyfill 库，例如 core-js。

使用 core-js 的示例：

// 导入必要的 polyfill
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... 导入其他需要的助手

错误处理

在处理异步操作时，正确处理错误至关重要。使用异步生成器助手时，可以使用 try...catch 块在助手中使用的异步函数内部进行错误处理。

示例： 在 `map()` 操作中处理获取数据时的错误。

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}: ${error}`);
      yield null; // 或适当地处理错误，例如，通过产生一个错误对象
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // 传播错误
    }
    // 处理数据
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

最佳实践与注意事项

• 惰性求值： 异步生成器助手是惰性求值的，这意味着它们只在请求时才处理数据。这可以提高性能，尤其是在处理大型数据集时。
• 错误处理： 始终在助手中使用的异步函数内部正确处理错误。
• Polyfill： 在需要时使用 polyfill 以支持旧版浏览器或环境。
• 可读性： 使用描述性的变量名和注释，使您的代码更具可读性和可维护性。
• 性能： 注意将多个助手链接在一起可能带来的性能影响。虽然惰性求值有帮助，但过多的链接仍然会引入开销。

结论

JavaScript 异步生成器助手提供了一种强大而优雅的方式来创建、转换和管理异步数据流。通过利用这些助手，开发者可以编写更简洁、更具可读性和可维护性的代码来处理复杂的异步操作。理解异步生成器和迭代器的基础知识，以及每个助手的功能，对于在实际应用中有效利用这些工具至关重要。无论您是构建数据管道、处理实时数据，还是处理异步 API 响应，异步生成器助手都可以显著简化您的代码并提高其整体效率。