获取API请求超时？

Question

我有一个fetch-api POST要求:

   fetch(url, {
      method: 'POST',
      body: formData,
      credentials: 'include'
    })

我想知道这是什么默认超时？我们如何将其设置为特定值,如3秒或无限秒？

Answer 1

我真的很喜欢使用Promise.race的这个要点的干净方法

fetchWithTimeout.js

export default function (url, options, timeout = 7000) {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('timeout')), timeout)
        )
    ]);
}

main.js

import fetch from './fetchWithTimeout'

// call as usual or with timeout as 3rd argument

fetch('http://google.com', options, 5000) // throw after max 5 seconds timeout error
.then((result) => {
    // handle result
})
.catch((e) => {
    // handle errors and timeout error
})

Answer 2

它没有指定的默认值; 规范根本不讨论超时.

您可以为promises实现自己的超时包装器:

// Rough implementation. Untested.
function timeout(ms, promise) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject(new Error("timeout"))
    }, ms)
    promise.then(resolve, reject)
  })
}

timeout(1000, fetch('/hello')).then(function(response) {
  // process response
}).catch(function(error) {
  // might be a timeout error
})

如描述https://github.com/github/fetch/issues/175 由评论https://github.com/mislav

Answer 3

使用中止语法,您将能够:

const controller = new AbortController();
const signal = controller.signal;

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

// 5 second timeout:
const timeoutId = setTimeout(() => controller.abort(), 5000);


fetchPromise.then(response => {
  // completed request before timeout fired

  // If you only wanted to timeout the request, not the response, add:
  // clearTimeout(timeoutId);
})

请参阅MDN上的AbortController页面.

Answer 4

基于 Endless 的优秀答案，我创建了一个有用的实用程序功能。

const fetchTimeout = (url, ms, { signal, ...options } = {}) => {
    const controller = new AbortController();
    const promise = fetch(url, { signal: controller.signal, ...options });
    if (signal) signal.addEventListener("abort", () => controller.abort());
    const timeout = setTimeout(() => controller.abort(), ms);
    return promise.finally(() => clearTimeout(timeout));
};

1. 如果在获取资源之前达到超时，则中止获取。
2. 如果在达到超时之前获取资源，则清除超时。
3. 如果中止输入信号，则中止提取并清除超时。

const controller = new AbortController();

document.querySelector("button.cancel").addEventListener("click", () => controller.abort());

fetchTimeout("example.json", 5000, { signal: controller.signal })
    .then(response => response.json())
    .then(console.log)
    .catch(error => {
        if (error.name === "AbortError") {
            // fetch aborted either due to timeout or due to user clicking the cancel button
        } else {
            // network error or json parsing error
        }
    });

希望有帮助。

Answer 5

更简洁的方法实际上是在 MDN 中：https ://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#aborting_a_fetch_operation_with_a_timeout

try {
    await fetch(url, { signal: AbortSignal.timeout(5000) });
} catch (e) {
    if (e.name === "TimeoutError") {
        console.log('5000 ms timeout');
    }
}

Answer 6

如果您没有在代码中配置超时，则这将是浏览器的默认请求超时。

1) 火狐 - 90 秒

about:config在 Firefox URL 字段中输入。找到key对应的valuenetwork.http.connection-timeout

2) Chrome - 300 秒

来源

Answer 7

编辑：获取请求仍将在后台运行，并且很可能会在您的控制台中记录错误。

确实Promise.race方法更好。

请参阅此链接以供参考Promise.race()

Race 意味着所有 Promise 将同时运行，一旦其中一个 Promise 返回值，比赛就会停止。因此，只会返回一个值。如果提取超时，您还可以传递一个函数来调用。

fetchWithTimeout(url, {
  method: 'POST',
  body: formData,
  credentials: 'include',
}, 5000, () => { /* do stuff here */ });

如果这激起了你的兴趣，一个可能的实现是：

function fetchWithTimeout(url, options, delay, onTimeout) {
  const timer = new Promise((resolve) => {
    setTimeout(resolve, delay, {
      timeout: true,
    });
  });
  return Promise.race([
    fetch(url, options),
    timer
  ]).then(response => {
    if (response.timeout) {
      onTimeout();
    }
    return response;
  });
}

Answer 8

提取API中尚无超时支持。但是可以通过将其包装在承诺中来实现。

例如

  function fetchWrapper(url, options, timeout) {
    return new Promise((resolve, reject) => {
      fetch(url, options).then(resolve, reject);

      if (timeout) {
        const e = new Error("Connection timed out");
        setTimeout(reject, timeout, e);
      }
    });
  }

Answer 9

这是使用 NodeJS 的 SSCCE，它将在 1000 毫秒后超时：

import fetch from 'node-fetch';

const controller = new AbortController();
const timeout = setTimeout(() => {
    controller.abort();
}, 1000); // will time out after 1000ms

fetch('https://www.yourexample.com', {
    signal: controller.signal,
    method: 'POST',
    body: formData,
    credentials: 'include'
}
)
.then(response => response.json())
.then(json => console.log(json))
.catch(err => {
    if(err.name === 'AbortError') {
        console.log('Timed out');
    }}
)
.finally( () => {
    clearTimeout(timeout);
});