如何使用 ECMAScript 2019 的 flatMap 和 reduce 方法处理多个 API 响应

在前端开发中，我们经常需要从多个 API 中获取数据并对其进行处理，以展示在页面上。ECMAScript 2019 中的 flatMap 和 reduce 方法能够很好地帮助我们处理这种情况。

flatMap 方法

flatMap 方法可以将一个数组映射为另一个数组，并将结果展开成一个新的数组。它的语法如下：

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 是一个函数，用来处理当前数组的每个元素。它可以返回一个数组，也可以返回一个单一的值。flatMap 方法将所有的返回值合并成一个新的数组，并返回。

下面是一个使用 flatMap 方法处理多个 API 响应的示例代码：

// javascriptcn.com 代码示例
const apiUrls = [
  'https://api.example.com/users',
  'https://api.example.com/orders',
  'https://api.example.com/products',
];

Promise.all(apiUrls.map(url => fetch(url)))
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => data.flatMap(item => item));

上面的代码中，我们首先使用 Promise.all 方法并结合 map 方法获取多个 API 的响应结果，并通过 Promise.all 方法等待所有的响应结果返回。然后我们将每个响应结果通过 json 方法转换为 JSON 格式的数据，并使用 flatMap 方法将所有数据合并成一个新的数组。

reduce 方法

reduce 方法可以将一个数组中的所有元素按照指定的规则进行计算，并返回一个单一的值。它的语法如下：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

其中，callback 是一个函数，用来处理当前数组的每个元素。它接收两个参数，第一个参数是累加器（accumulator），第二个参数是当前元素的值（currentValue）。callback 函数可以返回一个值，这个值将作为下一次调用 callback 函数时的累加器。

下面是一个使用 reduce 方法处理多个 API 响应的示例代码：

// javascriptcn.com 代码示例
const apiUrls = [
  'https://api.example.com/users',
  'https://api.example.com/orders',
  'https://api.example.com/products',
];

Promise.all(apiUrls.map(url => fetch(url)))
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => data.reduce((acc, cur) => [...acc, ...cur], []));

上面的代码中，我们首先使用 Promise.all 方法并结合 map 方法获取多个 API 的响应结果，并通过 Promise.all 方法等待所有的响应结果返回。然后我们将每个响应结果通过 json 方法转换为 JSON 格式的数据，并使用 reduce 方法将所有数据合并成一个新的数组。

总结

使用 ECMAScript 2019 的 flatMap 和 reduce 方法可以很方便地处理多个 API 响应。在使用这些方法时，我们需要注意返回值的格式，并进行合适的处理。同时，我们也可以结合 Promise.all 方法来等待所有的 API 响应返回，以提高程序的性能和效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e53d6d2f5e1655d92a17d