fetch with Timeout

<代码>AbortSignals>>s 例在一定数量的微秒后,添加<0>timeout 时间选择Promise:

async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create a signal with timeout
  const signal = AbortSignal.timeout(timeout);

  // Make the fetch request
  const _fetchPromise = fetch(url, {
    ...opts,
    signal,
  });

  // Await the fetch with a catch in case it s aborted which signals an error
  const result = await _fetchPromise;
  return result;
};

// Usage
try {
  const impatientFetch = await fetchWithTimeout( / , {}, 2000);
}
catch(e) {
  console.log("fetch possibly canceled!", e);
}

虽然以前的<代码>AbortSignal将来自<代码>AbortController,但现在你可以使用<代码>AbortSignal.timeout来制作这一信号。

然而,目前只有最先进的浏览器版本支持<代码>AbortSignal.timeout。 与原功能一样,替代功能可使用settimeout,以待取消,但我们则使用signal with the fetch。 请求:

async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create the AbortController instance, get AbortSignal
  const abortController = new AbortController();
  const { signal } = abortController;

  // Make the fetch request
  const _fetchPromise = fetch(url, {
    ...opts,
    signal,
  });

  // Start the timer
  const timer = setTimeout(() => abortController.abort(), timeout);

  // Await the fetch with a catch in case it s aborted which signals an error
  try {
    const result = await _fetchPromise;
    clearTimeout(timer);
    return result;
  } catch (e) {
    clearTimeout(timer);
    throw e;
  }
};

// Usage
try {
  const impatientFetch = await fetchWithTimeout( / , {}, 2000);
}
catch(e) {
  console.log("fetch possibly canceled!", e);
}

以上《 Java本法典》更为清洁,现在我们有一个适当的APIC来取消<代码>fetch。 明智之举。 在请标书上贴上<代码>signal,使我们能够在一定时间后取消请求。

看到<代码>AbortController,AbortSignal和fetch。 不断发展,使<条码>sync要求更具有控制性,同时又不大幅改变APIC。