批量请求优化，Promise实现高效资源获取与分配

2022-12-17 14:41:05

批量请求：优化网页加载速度的秘密武器

什么是批量请求？

当你在网页上看到无数的用户头像时，幕后往往有一个鲜为人知的秘密在运作——批量请求。批量请求是一种优化技术，允许服务器在一次请求中获取多个资源，从而减少对服务器的并发压力。对于前端开发人员而言，我们可以利用 Promise 来实现批量请求，并在获取资源后逐个分发，从而完成整个请求过程。

为什么使用批量请求？

在日常开发中，我们会经常遇到需要批量请求的场景。例如，在一个页面上显示多个用户头像时，为了优化页面加载速度，服务端会提供一个批量请求接口。前端批量请求后再通过逻辑做单个用户与头像的关系匹配。

如何实现批量请求？

我们可以利用 Promise 来实现批量请求。Promise 是一种异步编程的概念，它允许我们定义一个异步操作，并指定当操作完成时要执行的回调函数。

// 定义一个批量请求函数
function batchRequest(urls) {
  // 创建一个 Promise 对象
  const promise = new Promise((resolve, reject) => {
    // 创建一个空数组来存储请求结果
    const results = [];

    // 遍历 URL 数组
    urls.forEach((url, index) => {
      // 发送请求
      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          // 将请求结果添加到数组中
          results[index] = data;

          // 如果所有请求都已完成，则调用 resolve 函数
          if (results.length === urls.length) {
            resolve(results);
          }
        })
        .catch((error) => {
          // 如果请求失败，则调用 reject 函数
          reject(error);
        });
    });
  });

  // 返回 Promise 对象
  return promise;
}

在上面的代码中，我们首先定义了一个批量请求函数 batchRequest。该函数接受一个 URL 数组作为参数，并返回一个 Promise 对象。在 Promise 对象内部，我们创建一个空数组来存储请求结果，然后遍历 URL 数组，对每个 URL 发送请求。

当请求完成后，我们将请求结果添加到数组中。如果所有请求都已完成，则调用 resolve 函数，将结果数组作为参数传递给它。如果请求失败，则调用 reject 函数，将错误信息作为参数传递给它。

示例：获取用户头像

我们可以使用批量请求函数来获取一组用户头像：

const urls = [
  'https://example.com/user1.jpg',
  'https://example.com/user2.jpg',
  'https://example.com/user3.jpg',
];

batchRequest(urls)
  .then((results) => {
    // 处理请求结果
    console.log(results);
  })
  .catch((error) => {
    // 处理请求失败
    console.error(error);
  });