JavaScript实现接口请求的超时机制方法汇总

在 JavaScript 中实现接口请求的超时机制有多种方法。以下是几种常见的方法汇总：

1. 使用 Promise.race

Promise.race 方法可以将请求的 Promise 和一个超时的 Promise 结合起来，哪个 Promise 先完成就以哪个为准。

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  const fetchPromise = fetch(url, options);

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('Request timed out'));
    }, timeout);
  });

  return Promise.race([fetchPromise, timeoutPromise]);
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

2. 使用 AbortController

AbortController 是一个现代的 API，用于中止 fetch 请求。可以结合 setTimeout 实现超时机制。

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  const controller = new AbortController();
  const { signal } = controller;

  const fetchPromise = fetch(url, { ...options, signal });

  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);

  return fetchPromise.finally(() => clearTimeout(timeoutId));
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

3. 使用 axios 的超时选项

如果你使用 axios 库，可以直接使用其内置的超时选项。

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts', { timeout: 3000 })
  .then(response => console.log(response.data))
  .catch(err => console.error('Error:', err));

4. 手动实现超时机制

通过 setTimeout 和 Promise 结合来实现

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error('Request timed out'));
    }, timeout);

    fetch(url, options)
      .then(response => {
        clearTimeout(timeoutId);
        resolve(response);
      })
      .catch(err => {
        clearTimeout(timeoutId);
        reject(err);
      });
  });
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

总结

• Promise.race：将请求的 Promise 和一个超时的 Promise 结合起来，哪个 Promise 先完成就以哪个为准。
• AbortController：使用现代的 API 中止 fetch 请求，结合 setTimeout 实现超时机制。
• axios 的超时选项：如果使用 axios 库，可以直接使用其内置的超时选项。
• 手动实现超时机制：通过 setTimeout 和 Promise 结合来实现。

选择适合你项目需求的方法来实现接口请求的超时机制。