API isteği zaman aşımı getirilsin mi?

Bir fetch-api POSTisteğim var:

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

Bunun için varsayılan zaman aşımının ne olduğunu bilmek istiyorum. ve bunu 3 saniye veya belirsiz saniye gibi belirli bir değere nasıl ayarlayabiliriz?

Düzenle 1

Yorumlarda belirtildiği gibi, orijinal cevaptaki kod, söz çözüldükten / reddedildikten sonra bile zamanlayıcıyı çalıştırmaya devam eder.

Aşağıdaki kod bu sorunu düzeltir.

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

Orijinal cevap

Belirli bir varsayılanı yoktur; şartname zaman aşımlarını hiç tartışmaz.

Genel olarak vaatler için kendi zaman aşımı sarmalayıcınızı uygulayabilirsiniz:

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

Açıklandığı gibi https://github.com/github/fetch/issues/175 isimli kullanıcının yorumu https://github.com/mislav

Gerçekten bu temiz yaklaşım gibi özünden kullanarak 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
})

AbortController'ı kullanarak bunu yapabilirsiniz:

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

Endless'ın mükemmel cevabını temel alarak yararlı bir yardımcı program işlevi oluşturdum.

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. Kaynak getirilmeden önce zaman aşımına ulaşılırsa, getirme iptal edilir.
2. Kaynak, zaman aşımına ulaşılmadan önce getirilirse, zaman aşımı temizlenir.
3. Giriş sinyali iptal edilirse, getirme iptal edilir ve zaman aşımı silinir.

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

Umarım yardımcı olur.

Getirme API'sinde henüz zaman aşımı desteği yok. Ama bir sözün içine sarılarak elde edilebilir.

örneğin.

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

DÜZENLEME : Getirme isteği arka planda çalışmaya devam edecek ve büyük olasılıkla konsolunuzda bir hata kaydedecektir.

Aslında Promise.raceyaklaşım daha iyidir.

Promise.race () referansı için bu bağlantıya bakın

Yarış, tüm Vaatlerin aynı anda çalışacağı ve vaatlerden biri bir değer verir vermez yarışın duracağı anlamına gelir. Bu nedenle, yalnızca bir değer döndürülür . Getirme zaman aşımına uğrarsa çağırmak için bir işlev de iletebilirsiniz.

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

Bu ilginizi çekerse, olası bir uygulama şöyle olacaktır:

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

Bir zaman aşımı oluşturabilirsin

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

Daha sonra herhangi bir sözü yerine getirebilirsiniz

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

Aslında temeldeki bir bağlantıyı iptal etmez, ancak bir sözün zaman aşımına uğramasına izin verir.
Referans

Kodunuzda zaman aşımı yapılandırmadıysanız, bu, tarayıcınızın varsayılan istek zaman aşımı olacaktır.

1) Firefox - 90 saniye

Tip about:configFirefox URL alanına. Anahtara karşılık gelen değeri bulunnetwork.http.connection-timeout

2) Chrome - 300 saniye

Kaynak

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

Kullanımı c-promise2 bu bir (gibi görünebilir zaman aşımıyla getirme iptal lib Canlı jsfiddle demo ):

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

Bu kod bir npm paketi olarak cp-getirme