使用c-promise2库，可取消的获取超时可能像这样(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

正确的错误处理技巧

正常的做法:

为了在大多数情况下增加超时支持，建议引入一个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, timeout) : undefined;
  return fetch(resource, {
    ...options,
    signal: controller.signal
  }).finally(() => {
    if (id != null) clearTimeout(id);
  });
}

调用控制器。abort或拒绝setTimeout回调函数中的承诺会扭曲堆栈跟踪。

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

好专业知识:

为了保留错误及其堆栈跟踪，可以应用以下技术:

function sleep(ms = 0, signal) { return new Promise((resolve, reject) => { const id = setTimeout(() => resolve(), ms); signal?.addEventListener("abort", () => { clearTimeout(id); reject(); }); }); } async function fetch( resource, options ) { const { timeout, signal, ...ropts } = options ?? {}; const controller = new AbortController(); let sleepController; try { signal?.addEventListener("abort", () => controller.abort()); const request = nodeFetch(resource, { ...ropts, signal: controller.signal, }); if (timeout != null) { sleepController = new AbortController(); const aborter = sleep(timeout, sleepController.signal); const race = await Promise.race([aborter, request]); if (race == null) controller.abort(); } return request; } finally { sleepController?.abort(); } } (async () => { try { await fetchWithTimeout(new URL(window.location.href), { timeout: 5 }); } catch (error) { console.error("Error in test", error); } })();

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

过时的原答案:

我非常喜欢使用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

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

基于无尽的回答，我创造了一个有用的效用函数。

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

如果在获取资源之前达到了超时，则会中止获取。 如果在超时之前获取资源，则超时将被清除。 如果输入信号被中止，那么取回将被中止，超时时间将被清除。

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

编辑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

在取回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);
      }
    });
  }