串联与并联异步请求(Promise)：从基础到实战

2023-11-30 07:47:15

异步请求与 Promise

在现代 Web 开发中，异步请求已成为不可或缺的一部分。它允许我们向服务器发送请求并处理响应，而无需等待整个页面重新加载。这显著提高了用户体验和应用程序的性能。

为了管理异步请求，JavaScript 引入了 Promise 对象。Promise 代表一个异步操作的最终完成或失败的结果。它提供了一种简洁的方式来处理异步操作，并使代码更具可读性和可维护性。

串联异步请求

串联异步请求是指按照顺序执行多个异步请求。这种方式确保了每个请求的结果都将用于下一个请求。这在某些情况下非常有用，例如当您需要在获取数据后立即对其进行处理时。

可以使用 Promise.then() 方法来实现串联异步请求。以下示例演示了如何使用 Promise.then() 方法串联两个异步请求：

const request1 = fetch('https://example.com/api/data1');
request1.then(response => {
  const data1 = response.json();
  return fetch('https://example.com/api/data2', {
    body: JSON.stringify(data1),
    method: 'POST',
  });
}).then(response => {
  const data2 = response.json();
  console.log(data2);
});

在这个示例中，我们首先使用 fetch() 方法向第一个 API 发送请求，然后使用 .then() 方法将第一个请求的结果作为第二个请求的参数。这样，第二个请求将在第一个请求完成之后执行。

并联异步请求

并联异步请求是指同时执行多个异步请求。这种方式可以提高应用程序的性能，因为它允许多个请求同时进行，而不是按照顺序执行。

可以使用 Promise.all() 方法来实现并联异步请求。以下示例演示了如何使用 Promise.all() 方法并联两个异步请求：

const request1 = fetch('https://example.com/api/data1');
const request2 = fetch('https://example.com/api/data2');

Promise.all([request1, request2]).then(responses => {
  const data1 = responses[0].json();
  const data2 = responses[1].json();
  console.log(data1, data2);
});

在这个示例中，我们使用 fetch() 方法同时向两个 API 发送请求，然后使用 Promise.all() 方法将这两个请求的结果作为参数。这样，这两个请求将同时执行，并且在两个请求都完成后，我们就可以同时获取这两个请求的结果。

性能优化

在使用异步请求时，性能优化是一个非常重要的考虑因素。以下是一些优化异步请求性能的技巧：

使用缓存： 对于经常需要访问的资源，可以使用缓存来提高性能。缓存可以将这些资源存储在本地，以便下次请求时可以直接从本地加载，而无需再次向服务器发送请求。
减少请求数量： 尽量减少发送到服务器的请求数量。这可以减少网络开销，并提高应用程序的性能。例如，您可以将多个小请求合并成一个大请求，或者使用数据分页来减少请求数量。
使用压缩： 对于较大的数据，可以使用压缩来减小数据的大小，从而提高传输速度。
使用 CDN： 使用 CDN（内容分发网络）可以将资源分布到多个服务器上，从而减少网络延迟并提高访问速度。

并发数限制

在某些情况下，您可能需要限制并发请求的数量。这可以防止服务器过载，并确保所有请求都能得到及时的处理。

可以使用 JavaScript 中的并发限制库（例如 concurrency-manager）来限制并发请求的数量。以下示例演示了如何使用 concurrency-manager 库限制并发请求的数量：

const manager = new ConcurrencyManager(3);

const request1 = fetch('https://example.com/api/data1');
const request2 = fetch('https://example.com/api/data2');
const request3 = fetch('https://example.com/api/data3');

manager.add(request1);
manager.add(request2);
manager.add(request3);

manager.on('complete', () => {
  console.log('All requests completed.');
});