获取 API 请求超时？

Question

我有一个fetch-api POST请求：

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

我想知道这个的默认超时是多少？ 我们如何将它设置为特定值，如 3 秒或无限秒？

Answer 1

使用 Promise Race 解决方案将使请求挂起，但仍会在后台消耗带宽，并降低仍在处理中时发出的最大允许并发请求。

而是使用AbortController来实际中止请求，这是一个示例

const controller = new AbortController()

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

fetch(url, { signal: controller.signal }).then(response => {
  // completed request before timeout fired

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

---

或者，您可以使用新添加的AbortSignal.timeout(5000) ...但现在大多数浏览器都没有很好地实现它。

---

^{AbortController 也可以用于其他事情，不仅可以用于获取，还可以用于可读/可写流。 更多更新的功能（特别是基于承诺的功能）将越来越多地使用它。 NodeJS 也在其流/文件系统中实现了 AbortController。 我知道网络蓝牙也在研究它。 现在它也可以与 addEventListener 选项一起使用，并在信号结束时停止监听}

Answer 2

更新，因为我的原始答案有点过时了，我建议使用像这里实现的中止控制器： https ://stackoverflow.com/a/57888548/1059828 或看看这篇非常好的帖子，解释使用 fetch 中止控制器： 如何取消HTTP fetch() 请求？

过时的原始答案：

我真的很喜欢这个gist中使用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 3

编辑 1

正如评论中所指出的，即使在承诺被解决/拒绝后，原始答案中的代码也会继续运行计时器。

下面的代码解决了这个问题。

function timeout(ms, promise) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('TIMEOUT'))
    }, ms)

    promise
      .then(value => {
        clearTimeout(timer)
        resolve(value)
      })
      .catch(reason => {
        clearTimeout(timer)
        reject(reason)
      })
  })
}

---

原始答案

它没有指定的默认值； 该规范根本没有讨论超时。

通常，您可以为 Promise 实现自己的超时包装器：

// 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 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

fetch 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 6

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

确实， Promise.race方法更好。

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

Race 意味着所有 Promises 将同时运行，并且一旦其中一个 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 7

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

1) 火狐 - 90 秒

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

2) 铬 - 300 秒

资源

Answer 8

一种更简洁的方法实际上是在 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 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);
});

Answer 10

您可以创建一个 timeoutPromise 包装器

function timeoutPromise(timeout, err, promise) {
  return new Promise(function(resolve,reject) {
    promise.then(resolve,reject);
    setTimeout(reject.bind(null,err), timeout);
  });
}

然后你可以包装任何承诺

timeoutPromise(100, new Error('Timed Out!'), fetch(...))
  .then(...)
  .catch(...)  

它实际上不会取消底层连接，但允许您超时承诺。
参考

Answer 11

  fetchTimeout (url,options,timeout=3000) {
    return new Promise( (resolve, reject) => {
      fetch(url, options)
      .then(resolve,reject)
      setTimeout(reject,timeout);
    })
  }

Answer 12

使用AbortController和setTimeout ；

const abortController = new AbortController();

let timer: number | null = null;

fetch('/get', {
    signal: abortController.signal, // Content to abortController
})
    .then(res => {
        // response success
        console.log(res);

        if (timer) {
            clearTimeout(timer); // clear timer
        }
    })
    .catch(err => {
        if (err instanceof DOMException && err.name === 'AbortError') {
            // will return a DOMException
            return;
        }

        // other errors
    });

timer = setTimeout(() => {
    abortController.abort();
}, 1000 * 10); // Abort request in 10s.

这是@fatcherjs/middleware-aborter中的一个片段。

通过使用fatcher ，可以轻松中止获取请求。

import { aborter } from '@fatcherjs/middleware-aborter';
import { fatcher, isAbortError } from 'fatcher';

fatcher({
    url: '/bar/foo',
    middlewares: [
        aborter({
            timeout: 10 * 1000, // 10s
            onAbort: () => {
                console.log('Request is Aborted.');
            },
        }),
    ],
})
    .then(res => {
        // Request success in 10s
        console.log(res);
    })
    .catch(err => {
        if (isAbortError(err)) {
            //Run error when request aborted.
            console.error(err);
        }

        // Other errors.
    });

Answer 13

正确的错误处理技巧

---

正常做法：

大多数时候要添加超时支持，建议引入这样的Promise实用函数：

function fetchWithTimeout(resource, { signal, timeout, ...options } = {}) {
  const controller = new AbortController();
  if (signal != null) signal.addEventListener("abort", controller.abort);
  const id = timeout != null ? setTimeout(controller.abort) : undefined;
  return fetch(resource, {
    ...options,
    signal: controller.signal
  }).finally(() => if (id != null) clearTimeout(id)));
}

在setTimeout回调函数中调用controller.abort或拒绝承诺会扭曲堆栈跟踪。

这是次优的，因为如果需要事后日志分析，则必须在调用fetch方法的函数中添加带有日志消息的样板错误处理程序。

---

良好的专业知识：

要保留错误及其堆栈跟踪，可以应用以下技术：

 // Utility methods const abortId = Symbol("request abort"); function sleep(ms = 0) { return new Promise((resolve) => { setTimeout(() => resolve(), ms); }); } async function fetchWithTimeout(resource, { signal, timeout, ...options } = {}) { const controller = new AbortController(); if (signal.= null) signal,addEventListener("abort". controller;abort), const request = fetch(resource. {..,options: signal. controller;signal }). if (timeout;= null) { const aborter = sleep(timeout).then(() => abortId), const race = await Promise;race([aborter. request]); if (typeof race === "symbol") { controller;abort(). } } return request. } // End Utility methods // Test function async function test() { try { const url = new URL(window;location,href): await fetchWithTimeout(url; { timeout. 5 }); console.info(`Request sent`), } catch (error) { console;error("Error in test"; error); } } test();

Answer 14

使用c-promise2 lib 可取消的超时提取可能看起来像这样（ Live jsfiddle 演示）：

import CPromise from "c-promise2"; // npm package

function fetchWithTimeout(url, {timeout, ...fetchOptions}= {}) {
    return new CPromise((resolve, reject, {signal}) => {
        fetch(url, {...fetchOptions, signal}).then(resolve, reject)
    }, timeout)
}
        
const chain = fetchWithTimeout("https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=10s", {timeout: 5000})
    .then(request=> console.log('done'));
    
// chain.cancel(); - to abort the request before the timeout

此代码作为 npm 包cp-fetch