আমার একটি 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হওয়ার পরে যদি কোনও ত্রুটি ঘটে তবে এটি "আনহ্যান্ডলড প্রত্যাখ্যান" করে । এই (হ্যান্ডলিং দ্বারা সমাধান করা যেতে পারে .catch) fetchব্যর্থতা এবং যদি সময়সীমার এখনও ঘটেনি rethrowing।
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);
})
অন্তহীন 'দুর্দান্ত উত্তরের উপর বিল্ডিং , আমি একটি সহায়ক ইউটিলিটি ফাংশন তৈরি করেছি।
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 cancellable liberal এর সংক্ষিপ্ত রূপ সময়সীমার সঙ্গে আনা এই এক (অনুরূপ হতে পারে লাইভ 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
এই এনপিএম প্যাকেজ হিসাবে সিপি-ফেচ করুন