首页 > 网络编程 > JavaScript > javascript技巧 > 前端判断多个请求完毕

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

2025-03-27 11:48:54 作者：北辰alk

在前端开发中,判断多个请求完毕是一个常见需求,这篇文章主要介绍了前端如何判断多个请求完毕实战及常见问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

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);
  });

请求性能优化

问题：过多请求可能导致性能问题。
解决方案：优化请求并发控制，减少不必要的请求。

6. 总结与展望

判断多个请求完毕的最佳实践

明确使用场景：根据需求选择合适的判断方法。
优化性能：合理控制请求并发，避免性能问题。
确保兼容性：确保代码在不同浏览器和环境中兼容。

未来发展方向

更强大的请求管理：支持更复杂的请求场景。
更好的性能优化：提供更高效的请求处理方式。

通过本文的学习，你应该已经掌握了前端如何判断多个请求完毕的多种方法。

总结

到此这篇关于前端如何判断多个请求完毕的文章就介绍到这了,更多相关前端判断多个请求完毕内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！