في هذه المدونة، سأرشدك عبر الخطوات العملية لإلغاء طلب الجلب باستخدام JavaScript، مع التركيز على AbortController API. وفي النهاية، سيكون لديك فهم واضح لكيفية جعل تطبيقات الويب الخاصة بك أكثر استجابة وصديقة للموارد.

لماذا تحتاج إلى إلغاء طلب الجلب؟

يعد إلغاء طلبات الجلب أمرًا بالغ الأهمية في السيناريوهات التي:

• تجربة المستخدم: عندما ينتقل المستخدمون بعيدًا عن الصفحة، ليست هناك حاجة لمواصلة جلب البيانات لتلك الصفحة.

• تحسين البحث: في ميزات البحث حيث تؤدي كل ضغطة على المفتاح إلى تشغيل طلب، يكون إلغاء الطلب السابق قبل إرسال طلب جديد أكثر كفاءة.

• سيناريوهات المهلة: في حالة تأخير الشبكة أو الطلبات طويلة الأمد، قد ترغب في تعيين مهلة وإلغاء الطلب إذا تجاوز مدة معينة.

فهم AbortController

توفر AbortController API طريقة أنيقة لإلغاء طلبات الجلب. وهو يعمل عن طريق إنشاء مثيل AbortController، الذي يتم تمرير إشارته إلى طلب الجلب. إذا قمت باستدعاء الأسلوب abort() على وحدة التحكم، فإنه يلغي الطلب.

دليل خطوة بخطوة لإلغاء طلبات الجلب

1. الإعداد الأساسي باستخدام AbortController

لنبدأ بالمثال الأساسي: إنشاء AbortController وإلغاء طلب الجلب.

// 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. تنفيذ المهلة لطلبات الجلب
تعد المهلات ضرورية عند التعامل مع ظروف الشبكة غير الموثوقة. باستخدام AbortController، يمكنك بسهولة تنفيذ آلية المهلة التي تلغي طلب الجلب إذا استغرق وقتًا طويلاً.

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