หมดเวลาของคำขอ Fetch API หรือไม่

ฉันมีfetch-api POSTคำขอ:

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

ฉันต้องการทราบว่าการหมดเวลาเริ่มต้นสำหรับสิ่งนี้คืออะไร แล้วเราจะตั้งค่าให้เป็นค่าเฉพาะเช่น 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)
      })
  })
}

คำตอบเดิม

ไม่มีค่าเริ่มต้นที่ระบุ ข้อกำหนดไม่ได้กล่าวถึงการหมดเวลาเลย

คุณสามารถใช้ Wrapper การหมดเวลาของคุณเองสำหรับสัญญาโดยทั่วไป:

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

ฉันชอบวิธีการที่สะอาดจากส่วนสำคัญนี้โดยใช้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คุณจะสามารถทำได้:

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 ฉันได้สร้างฟังก์ชันยูทิลิตี้ที่เป็นประโยชน์

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

หวังว่าจะช่วยได้

ยังไม่มีการสนับสนุนการหมดเวลาในการดึงข้อมูล 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);
      }
    });
  }

แก้ไข : คำขอดึงข้อมูลจะยังคงทำงานอยู่เบื้องหลังและมักจะบันทึกข้อผิดพลาดในคอนโซลของคุณ

แน่นอนPromise.raceแนวทางดีกว่า

ดูลิงค์นี้สำหรับข้อมูลอ้างอิงPromise.race ()

การแข่งขันหมายความว่าสัญญาทั้งหมดจะดำเนินไปพร้อมกันและการแข่งขันจะหยุดลงทันทีที่คำสัญญาใดคำหนึ่งส่งคืนค่า ดังนั้นจะส่งกลับเพียงค่าเดียว คุณยังสามารถส่งผ่านฟังก์ชันเพื่อโทรได้หากการดึงข้อมูลหมดเวลา

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

คุณสามารถสร้าง TimeoutPromise wrapper

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(...)  

จะไม่ยกเลิกการเชื่อมต่อพื้นฐาน แต่จะช่วยให้คุณหมดเวลาตามสัญญา
ข้อมูลอ้างอิง

หากคุณไม่ได้กำหนดค่าการหมดเวลาในรหัสของคุณจะเป็นการหมดเวลาคำขอเริ่มต้นของเบราว์เซอร์ของคุณ

1) Firefox - 90 วินาที

พิมพ์about:configช่อง URL ของ Firefox ค้นหาค่าที่ตรงกับคีย์network.http.connection-timeout

2) Chrome - 300 วินาที

ที่มา

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

การใช้c-Promise2 lib การดึงข้อมูลที่ยกเลิกได้ด้วยการหมดเวลาอาจมีลักษณะเช่นนี้ ( การสาธิต 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