前端如何判断多个请求完毕的实战及常见问题-牛翰网

1. 引言

为什么需要判断多个请求完毕？

在现代 Web 应用中，前端通常需要同时发起多个请求以获取数据。例如，在加载页面时，可能需要同时请求用户信息、商品列表、推荐内容等。判断这些请求是否全部完成，可以帮助我们更好地控制页面渲染和用户交互。

多请求场景的应用

数据加载：在页面加载时，同时请求多个数据源。
表单提交：在提交表单时，同时发送多个请求以处理不同部分的数据。
批量操作：在批量操作（如批量删除、批量更新）时，同时发起多个请求。

2. 判断多个请求完毕的基本方法

使用 Promise.all

Promise.all 接收一个 Promise 数组，并在所有 Promise 都成功时返回结果数组。如果任何一个 Promise 失败，Promise.all 会立即返回失败。

const promises = [fetch('/api/data1'), fetch('/api/data2'), fetch('/api/data3')];
Promise.all(promises)
  .then(results => {
    console.log('All requests completed:', results);
  })
  .catch(error => {
    console.error('One of the requests failed:', error);
  });

使用 Promise.allSettled

Promise.allSettled 接收一个 Promise 数组，并在所有 Promise 都完成时返回结果数组，无论成功或失败。

const promises = [fetch('/api/data1'), fetch('/api/data2'), fetch('/api/data3')];
Promise.allSettled(promises)
  .then(results => {
    console.log('All requests completed:', results);
  });

使用计数器

通过计数器跟踪请求的完成状态，判断所有请求是否完成。

let completedRequests = 0;
const totalRequests = 3;

const checkCompletion = () => {
  completedRequests++;
  if (completedRequests === totalRequests) {
    console.log('All requests completed');
  }
};

fetch('/api/data1').then(checkCompletion);
fetch('/api/data2').then(checkCompletion);
fetch('/api/data3').then(checkCompletion);

使用 async/await

使用 async/await 语法，可以更简洁地处理多个请求。

async function fetchAllData() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetch('/api/data1'),
      fetch('/api/data2'),
      fetch('/api/data3'),
    ]);
    console.log('All requests completed:', data1, data2, data3);
  } catch (error) {
    console.error('One of the requests failed:', error);
  }
}

fetchAllData();

3. 实战：判断多个请求完毕的应用

项目初始化

使用 Vue CLI 或 Vite 创建一个新的 Vue 3 项目：

npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install

使用 Promise.all 判断多个请求完毕

const promises = [fetch('/api/data1'), fetch('/api/data2'), fetch('/api/data3')];
Promise.all(promises)
  .then(results => {
    console.log('All requests completed:', results);
  })
  .catch(error => {
    console.error('One of the requests failed:', error);
  });

使用 Promise.allSettled 判断多个请求完毕

const promises = [fetch('/api/data1'), fetch('/api/data2'), fetch('/api/data3')];
Promise.allSettled(promises)
  .then(results => {
    console.log('All requests completed:', results);
  });

使用计数器判断多个请求完毕

let completedRequests = 0;
const totalRequests = 3;

const checkCompletion = () => {
  completedRequests++;
  if (completedRequests === totalRequests) {
    console.log('All requests completed');
  }
};

fetch('/api/data1').then(checkCompletion);
fetch('/api/data2').then(checkCompletion);
fetch('/api/data3').then(checkCompletion);

使用 async/await 判断多个请求完毕

async function fetchAllData() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetch('/api/data1'),
      fetch('/api/data2'),
      fetch('/api/data3'),
    ]);
    console.log('All requests completed:', data1, data2, data3);
  } catch (error) {
    console.error('One of the requests failed:', error);
  }
}

fetchAllData();

4. 进阶：多请求处理的优化策略

请求并发控制

通过限制并发请求数量，避免同时发起过多请求导致性能问题。

async function fetchWithConcurrency(urls, concurrency = 3) {
  const results = [];
  const executing = [];

  for (const url of urls) {
    const p = fetch(url).then(res => {
      results.push(res);
      executing.splice(executing.indexOf(p), 1);
    });
    executing.push(p);

    if (executing.length >= concurrency) {
      await Promise.race(executing);
    }
  }

  await Promise.all(executing);
  return results;
}

请求重试机制

在请求失败时自动重试，提高请求的成功率。

async function fetchWithRetry(url, retries = 3) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Request failed');
    return response;
  } catch (error) {
    if (retries > 0) {
      return fetchWithRetry(url, retries - 1);
    }
    throw error;
  }
}

请求缓存

通过缓存请求结果，减少重复请求。

const cache = new Map();

async function fetchWithCache(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await fetch(url);
  cache.set(url, response);
  return response;
}

5. 常见问题与解决方案

请求超时处理

问题：请求可能因网络问题超时。
解决方案：设置请求超时时间，超时后取消请求。

async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return response;
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('Request timed out');
    }
    throw error;
  }
}

请求错误处理

问题：请求可能因各种原因失败。
解决方案：捕获请求错误，并进行相应处理。

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Request failed');
    return response.json();
  })
  .catch(error => {
    console.error('Request failed:', error);
  });