इस ब्लॉग में, मैं आपको एबॉर्टकंट्रोलर एपीआई पर ध्यान केंद्रित करते हुए जावास्क्रिप्ट का उपयोग करके एक फ़ेच अनुरोध को रद्द करने के व्यावहारिक चरणों के बारे में बताऊंगा। अंत तक, आपको इस बात की स्पष्ट समझ हो जाएगी कि अपने वेब ऐप्स को अधिक प्रतिक्रियाशील और संसाधन-अनुकूल कैसे बनाया जाए।

आपको फ़ेच अनुरोध रद्द करने की आवश्यकता क्यों होगी?

फ़ेच अनुरोधों को रद्द करना उन परिदृश्यों में महत्वपूर्ण है जहां:

• उपयोगकर्ता अनुभव: जब उपयोगकर्ता किसी पृष्ठ से दूर जाते हैं, तो उस पृष्ठ के लिए डेटा प्राप्त करना जारी रखने की कोई आवश्यकता नहीं है।

• खोज अनुकूलन: खोज सुविधाओं में जहां प्रत्येक कीस्ट्रोक एक अनुरोध को ट्रिगर करता है, नया अनुरोध भेजने से पहले पिछले अनुरोध को रद्द करना अधिक कुशल है।

• टाइमआउट परिदृश्य: नेटवर्क विलंब या लंबे समय तक चलने वाले अनुरोधों के मामले में, आप एक टाइमआउट सेट करना चाहेंगे और यदि अनुरोध एक निश्चित अवधि से अधिक हो जाता है तो उसे रद्द करना चाहेंगे।

एबॉर्टकंट्रोलर को समझना

एबॉर्टकंट्रोलर एपीआई फ़ेच अनुरोधों को रद्द करने का एक शानदार तरीका प्रदान करता है। यह एक एबॉर्टकंट्रोलर इंस्टेंस बनाकर काम करता है, जिसका सिग्नल फ़ेच रिक्वेस्ट को पास कर दिया जाता है। यदि आप नियंत्रक पर abort() विधि को कॉल करते हैं, तो यह अनुरोध रद्द कर देता है।

फ़ेच अनुरोधों को रद्द करने के लिए चरण-दर-चरण मार्गदर्शिका

1. एबॉर्टकंट्रोलर का उपयोग कर मूल सेटअप

आइए सबसे बुनियादी उदाहरण से शुरू करें: एक एबॉर्टकंट्रोलर बनाना और एक फ़ेच अनुरोध को रद्द करना।

// Step 1: Create an instance of AbortController
const controller = new AbortController();

// Step 2: Pass the signal to the fetch request
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch request was canceled');
        } else {
            console.error('Fetch error:', err);
        }
    });

// Step 3: Cancel the fetch request
controller.abort();

2. व्यावहारिक उपयोग का मामला: उपयोगकर्ता इंटरैक्शन पर अनुरोध रद्द करना
एक सामान्य परिदृश्य उपयोगकर्ता इंटरैक्शन के जवाब में फ़ेच अनुरोध को रद्द करना है। उदाहरण के लिए, खोज सुविधा लागू करते समय, प्रत्येक कीस्ट्रोक एक नया फ़ेच अनुरोध ट्रिगर कर सकता है। पिछले अनुरोध को रद्द करने से पुराने या अप्रासंगिक डेटा को संसाधित होने से रोका जा सकता है।

let controller;

function search(query) {
    // Cancel the previous request if it exists
    if (controller) {
        controller.abort();
    }

    // Create a new controller for the new request
    controller = new AbortController();

    // Fetch data with the new controller
    fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal })
        .then(response => response.json())
        .then(data => console.log('Search results:', data))
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Previous request canceled');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage: simulate user typing
search('React');
search('Vue'); // The request for 'React' is canceled

3. फ़ेच अनुरोधों के लिए टाइमआउट लागू करना
अविश्वसनीय नेटवर्क स्थितियों से निपटने के लिए टाइमआउट आवश्यक हैं। एबॉर्टकंट्रोलर का उपयोग करके, आप आसानी से एक टाइमआउट तंत्र लागू कर सकते हैं जो बहुत अधिक समय लगने पर फ़ेच अनुरोध को रद्द कर देता है।

function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    return fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeoutId);
            return response.json();
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch request timed out');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000)
    .then(data => console.log('Data:', data));

फ़ेच अनुरोध रद्दीकरण को शालीनता से संभालना

फ़ेच अनुरोधों को रद्द करते समय, उन्हें शालीनता से संभालना महत्वपूर्ण है। इसमें रद्दीकरण और अन्य प्रकार की त्रुटियों के कारण होने वाली त्रुटियों के बीच अंतर करना शामिल है।

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            // Handle cancellation specifically
            console.log('Request was canceled');
        } else {
            // Handle other types of errors
            console.error('Request failed', err);
        }
    });