मेरा एक fetch-api POSTनिवेदन है:
fetch(url, {
method: 'POST',
body: formData,
credentials: 'include'
})
मैं जानना चाहता हूं कि इसके लिए डिफ़ॉल्ट टाइमआउट क्या है? और हम इसे 3 सेकंड या अनिश्चित सेकंड जैसे किसी विशेष मान पर कैसे सेट कर सकते हैं?
जवाबों:
जैसा कि टिप्पणियों में कहा गया है, मूल उत्तर में कोड वादा / हल किए जाने के बाद भी टाइमर को चालू रखता है।
नीचे दिया गया कोड उस समस्या को हल करता है।
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)
})
})
}
इसमें एक निर्दिष्ट डिफ़ॉल्ट नहीं है; विनिर्देश बिल्कुल समयबाह्य चर्चा नहीं करता है।
आप सामान्य रूप से वादों के लिए अपना स्वयं का टाइमआउट आवरण लागू कर सकते हैं:
// 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
.reject()पहले से ही हल किए गए वादे पर कॉल करने से कुछ नहीं होता है।
मैं वास्तव में 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
})
fetchत्रुटि होती है तो यह "अनहेल्ड रिजेक्शन" का कारण बनता है । यह समय-समय पर नहीं हुआ है, तो विफलता ( और असफलता ) को संभालने से हल किया जा सकता है । .catchfetch
एक वादा दौड़ समाधान का उपयोग करते हुए अनुरोध लटका हुआ है और अभी भी पृष्ठभूमि में बैंडविड्थ का उपभोग करेगा और प्रक्रिया में होने के दौरान अधिकतम अनुमत समवर्ती अनुरोध कम किया जाएगा।
इसके बजाय वास्तव में अनुरोध को निरस्त करने के लिए एबोर्टकंट्रोलर का उपयोग करें , यहां एक उदाहरण है
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)
})
एबोर्टकंट्रोलर का उपयोग अन्य चीजों के लिए भी किया जा सकता है, न केवल लाने के लिए बल्कि पठनीय / लिखने योग्य धाराओं के लिए भी। अधिक नए कार्य (विशेष रूप से वादा आधारित) यह अधिक से अधिक उपयोग करेंगे। NodeJS ने अपनी धाराओं / फाइल सिस्टम में भी AbortController को लागू किया है। मुझे पता है कि वेब ब्लूटूथ इसे भी देख रहा है
अंतहीन 'उत्कृष्ट जवाब पर निर्माण , मैंने एक उपयोगी उपयोगिता फ़ंक्शन बनाया।
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
}
});
उम्मीद है की वो मदद करदे।
अभी तक एपीआई एपीआई में कोई समयबाह्य समर्थन नहीं है। लेकिन इसे वादे में लपेट कर हासिल किया जा सकता था।
उदाहरण के लिए।
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;
});
}
आप टाइमआउटप्रॉपर रैपर बना सकते हैं
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(...)
यह वास्तव में एक अंतर्निहित कनेक्शन को रद्द नहीं करेगा लेकिन आपको एक वादा पूरा करने की अनुमति देगा।
संदर्भ
fetchTimeout (url,options,timeout=3000) {
return new Promise( (resolve, reject) => {
fetch(url, options)
.then(resolve,reject)
setTimeout(reject,timeout);
})
}
का उपयोग करते हुए सी 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 के रूप में है