Promise.map() 的实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理异步请求，Promise 是很好的解决方案。但是，在处理异步操作时，我们还需要进行一些类似于数组映射操作的处理。这时候，就可以使用 Promise.map() 方法来实现。

Promise.map() 的用途

Promise.map() 方法可以将一个异步操作的数组映射为另一个数组。假设我们现在有以下代码：

// javascriptcn.com 代码示例
const urls = [
  'https://example.com/data1',
  'https://example.com/data2',
  'https://example.com/data3'
];

const results = [];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => results.push(data))
    .catch(error => console.log(error));
});

上面的代码通过遍历 urls 数组来进行异步请求，但是由于 fetch 方法是异步的，所以我们并不能在 forEach 循环中直接收集到返回的数据，我们需要将异步请求映射为另一个数组。这时候，Promise.map() 方法就派上用场了。

既然 Promise.map() 方法不存在，我们就需要自己来实现这个方法。下面是 Promise.map() 的具体实现：

Promise.map = function (iterable, mapper) {
  return Promise.all([...iterable].map(mapper));
};

上面的代码中，我们重新定义 Promise 对象的 map() 方法，它接受两个参数：可迭代对象 iterable 和一个 map 函数 mapper。首先，我们将 iterable 转化为数组，然后使用 map() 方法将每个值传入 mapper。map 函数的返回值是一个 Promise 对象，并将每个 Promise 对象包装到一个 Promise.all() 中。最后，当所有 Promise 对象都完成时，Promise.all() 返回的 Promise 对象就会被 resolve 并返回对应的结果列表。

实际上，Promise.map() 的实现就是 Promise.all() 和 Array.prototype.map() 的结合。使用 Promise.all() 可以保证每个 Promise 对象都能按顺序执行，并保证结果的顺序性。

Promise.map() 的用法

下面是 Promise.map() 方法的使用方式：

// javascriptcn.com 代码示例
const urls = [
  'https://example.com/data1',
  'https://example.com/data2',
  'https://example.com/data3'
];

Promise.map(urls, url => { 
  return fetch(url)
    .then(response => response.json())
})
.then(results => console.log(results))
.catch(error => console.log(error));

上面的代码中，我们将 urls 数组传递给 Promise.map() 方法，并使用匿名函数来进行映射操作。在每个 Promise 对象 resolve 之后，映射函数会返回数据，这将被传递到最后的 then() 回调中，我们可以在该回调中处理返回的数组。

升级版的 Promise.map()

我们还可以将 Promise.map() 进一步升级，让它支持同时处理多个异步请求，提高效率：

// javascriptcn.com 代码示例
Promise.map = function (iterable, mapper, concurrency) {
  const limit = concurrency || iterable.length;
  const tasks = [...iterable];
  const results = [];
  
  const enqueue = () => {
    if (tasks.length <= 0) {
      return Promise.resolve();
    }
    
    const task = tasks.shift();
    return Promise.resolve()
      .then(() => mapper(task))
      .then(result => {
        results.push(result);
        return enqueue();
      });
  };
  
  const start = () => {
    const promises = [];
    for (let i = 0; i < limit; i++) {
      promises.push(enqueue());
    }

    return Promise.all(promises)
      .then(() => results);
  };

  return start();
};

在升级版的 Promise.map() 中，我们增加了一个 concurrency 参数，表示同时进行的最大异步数量。我们首先将所有任务存储在一个数组中，然后定义了一个 enqueue() 函数，用于处理一个异步任务。函数首先从数组中获取一个任务，然后使用 mapper() 函数处理该任务，并存储返回结果。

在 enqueue() 函数中，我们使用 Promise 对象包装 mapper() 函数的返回结果，以便我们能在结果返回时处理下一个任务。我们将结果推入 results 数组中，并再次调用 enqueue() 函数处理下一个任务。

最后，我们启动 start() 函数，这个函数将创建多个 Promise 对象，使任务并行执行。start() 函数将所有 Promise 对象存储在 promises 数组中，并使用 Promise.all() 函数等待所有 Promise 对象都完成，然后返回最终结果数组。

总结

通过实现 Promise.map() 方法，我们可以更加简单和高效地管理异步任务。通过使用该方法，我们可以将异步任务的数组映射为另一个数组，并在所有任务都完成时得到结果。同时，通过升级版的 Promise.map()，我们还可以提高异步任务的处理效率，使其可同时处理多个异步请求。

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