كيفية إلغاء طلبات API باستخدام Axios

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

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

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

كيف تعمل إلغاء طلبات Axios

كيف تعمل هذه الإلغاء؟ حسنًا، المفتاح يكمن في CancelToken الذي تقدمه Axios. تتيح لك هذه الرمز إنشاء "عملية قابلة للإلغاء" وربطها بطلب معين. إذا قررت إلغاء العملية، ستتوقف Axios تلقائيًا عن الطلب المقابل.

إنشاء CancelToken

CancelToken من Axios:

import axios from 'axios';

const source = axios.CancelToken.source();

كائن source يحتوي على خاصيتين: token و cancel. خاصية token هي ما ستقوم بتمريره مع طلبات Axios الخاصة بك، بينما تُستخدم دالة cancel، حسنًا، لإلغاء الطلب.

إجراء طلب يمكن إلغاؤه

الآن بعد أن لديك CancelToken، يمكنك ربطه بطلب Axios الخاص بك بهذه الطريقة:

axios.get('/api/suggestions', {
  cancelToken: source.token
})
  .then(response => {
    // التعامل مع الاستجابة الناجحة
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      // التعامل مع الإلغاء
    } else {
      // التعامل مع الأخطاء الأخرى
    }
  });

من خلال تمرير source.token كخيار cancelToken، تخبر Axios أن هذا الطلب يمكن إلغاؤه. إذا تم إلغاء الطلب بنجاح، سيتم رفض الوعد (Promise) مع كائن Cancel، والذي يمكنك التعامل معه في كتلة catch.

إلغاء الطلب

لإلغاء الطلب فعليًا، ما عليك سوى استدعاء دالة cancel المقدمة من كائن source:

source.cancel('تم إلغاء العملية بواسطة المستخدم.');

يمكنك تمرير سبب اختياري لإلغاء الطلب، والذي سيكون متاحًا في كائن Cancel الذي تم إلقاؤه بواسطة الوعد المرفوض.

مثال من العالم الحقيقي: اقتراحات البحث مع إلغاء طلبات Axios

الآن بعد أن فهمت الأساسيات، دعنا نرى كيف يمكنك تنفيذ إلغاء طلبات Axios في سيناريو من العالم الحقيقي. سنبني ميزة اقتراحات بحث بسيطة باستخدام React وواجهة برمجة التطبيقات apidog (واجهة برمجة تطبيقات وهمية لأغراض الاختبار).

أولاً، دعنا نقوم بإعداد مكون React الخاص بنا:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const SearchSuggestions = () => {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [cancelToken, setCancelToken] = useState(null);

  // ... (منطق المكون هنا)

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="بحث..."
      />
      <ul>
        {suggestions.map(suggestion => (
          <li key={suggestion}>{suggestion}</li>
        ))}
      </ul>
    </div>
  );
};

بعد ذلك، دعنا ننفذ دالة handleInputChange، والتي ست fetch اقتراحات من واجهة برمجة التطبيقات apidog:

const handleInputChange = (event) => {
  const newQuery = event.target.value;
  setQuery(newQuery);

  // إلغاء الطلب السابق إذا كان موجودًا
  if (cancelToken) {
    cancelToken.cancel('إلغاء الطلب السابق');
  }

  // إنشاء CancelToken جديد للطلب الحالي
  const source = axios.CancelToken.source();
  setCancelToken(source);

  // إجراء طلب API مع CancelToken الجديد
  axios.get(`https://api.apidog.com/suggestions?query=${newQuery}`, {
    cancelToken: source.token
  })
    .then(response => {
      setSuggestions(response.data.suggestions);
    })
    .catch(thrown => {
      if (axios.isCancel(thrown)) {
        console.log('تم إلغاء الطلب:', thrown.message);
      } else {
        console.error('خطأ في جلب الاقتراحات:', thrown);
      }
    });
};

في هذا المثال، نحن نقوم بإلغاء أي طلب سابق قبل إجراء طلب جديد. نخلق CancelToken جديد لكل طلب ونسجله في حالة المكون باستخدام دالة setCancelToken. عندما يكتب المستخدم في مربع البحث، نقوم بإلغاء الطلب السابق (إذا كان موجودًا) ونقوم بإجراء طلب جديد مع الاستعلام المحدث و CancelToken الجديد.

إذا تم إلغاء الطلب بنجاح، ستتعامل كتلة catch مع الإلغاء وتقوم بتسجيل السبب. إذا كان هناك أي خطأ آخر، سيتم التقاطه وتسجيله أيضًا.

تقنيات متقدمة

الآن بعد أن أتقنت أساسيات إلغاء طلبات Axios، دعنا نلقي نظرة على بعض التقنيات المتقدمة التي يمكن أن تعزز مهاراتك أكثر.

مثيل Axios القابل لإعادة الاستخدام مع إلغاء الطلبات تلقائيًا

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

إليك مثال عن كيفية إنشاء مثل هذا المثيل:

import axios from 'axios';

const axiosInstance = axios.create();
let cancelToken;

axiosInstance.interceptors.request.use(
  config => {
    if (cancelToken) {
      cancelToken.cancel('إلغاء الطلب السابق');
    }

    config.cancelToken = new axios.CancelToken(c => {
      cancelToken = c;
    });

    return config;
  },
  error => Promise.reject(error)
);

export default axiosInstance;

في هذا المثال، نقوم بإنشاء مثيل Axios جديد باستخدام axios.create(). ثم نقوم بإعداد معترض (interceptor) للطلبات، والذي يلغي تلقائيًا أي طلب سابق قبل إجراء طلب جديد. يتم تخزين cancelToken عالميًا ويتم تخصيصه لكل خيار cancelToken لتلك الطلبات الجديدة.

يمكنك بعد ذلك استخدام هذا axiosInstance في جميع أنحاء التطبيق الخاص بك لإجراء طلبات API، وسيتولى تلقائيًا التعامل مع إلغاءات الطلبات من أجلك.

التعامل مع طلبات قابلة للإلغاء متعددة

في بعض الحالات، قد يكون لديك طلبات قابلة للإلغاء متعددة في مكون واحد أو دالة واحدة. للتعامل مع هذه الحالة، يمكنك استخدام مصفوفة أو كائن لتخزين عدة مثيلات من CancelToken.

إليك مثال عن كيفية إدارة الطلبات القابلة للإلغاء المتعددة:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MultipleRequests = () => {
  const [cancelTokens, setCancelTokens] = useState({});

  const fetchData = (endpoint) => {
    // إلغاء أي طلب موجود لنفس نقطة النهاية
    if (cancelTokens[endpoint]) {
      cancelTokens[endpoint].cancel('إلغاء الطلب السابق');
    }

    // إنشاء CancelToken جديد للطلب الحالي
    const source = axios.CancelToken.source();
    setCancelTokens(prevTokens => ({ ...prevTokens, [endpoint]: source }));

    // إجراء طلب API مع CancelToken الجديد
    axios.get(`https://api.apidog.com/${endpoint}`, {
      cancelToken: source.token
    })
      .then(response => {
        // التعامل مع الاستجابة الناجحة
      })
      .catch(thrown => {
        if (axios.isCancel(thrown)) {
          console.log('تم إلغاء الطلب:', thrown.message);
        } else {
          console.error('خطأ في جلب البيانات:', thrown);
        }
      });
  };

  return (
    <div>
      <button onClick={() => fetchData('endpoint1')}>جلب البيانات 1</button>
      <button onClick={() => fetchData('endpoint2')}>جلب البيانات 2</button>
    </div>
  );
};

في هذا المثال، نستخدم كائن cancelTokens لتخزين عدة مثيلات من CancelToken، مع نقطة النهاية كمفتاح. عند إجراء طلب جديد، نتحقق أولاً مما إذا كان هناك CancelToken موجود لتلك النقطة النهائية ونلغيها إذا لزم الأمر. بعد ذلك، نخلق CancelToken جديدًا ونخزنه في كائن cancelTokens، مما يستبدل أي قيمة سابقة لتلك النقطة النهائية.

تسمح لك هذه الطريقة بإدارة عدة طلبات قابلة للإلغاء ضمن نفس المكون أو الدالة، مما يضمن تنفيذ أحدث طلب لكل نقطة نهائية.

كيفية إلغاء طلبات API باستخدام Apidog؟

لإلغاء طلب API باستخدام Apidog، عادةً ستتبع الخطوات التالية:

1. افتح Apidog وأنشئ طلبًا جديدًا.

2. حدد طريقة الطلب كـ DELETE.

3. أدخل عنوان URL للمورد الذي ترغب في حذفه وأضف أي رؤوس أو معلمات إضافية تحتاجها.

4. انقر على زر “إرسال” لإرسال الطلب وتحليل الاستجابة

سيؤدي ذلك إلى إرسال طلب DELETE إلى عنوان URL المحدد، وهو الطريقة القياسية لإزالة الموارد من خلال واجهات برمجة التطبيقات. ومع ذلك، إذا كنت تبحث عن إلغاء طلب قيد التقدم، فقد لا يتم دعم ذلك مباشرة من قبل Apidog حيث سيعتمد ذلك على وظيفة الواجهة البرمجية وما إذا كانت تدعم إلغاء الطلبات التي تم تنفيذها.

بالنسبة لواجهات برمجة التطبيقات التي لا تدعم الإلغاء، سيتعين عليك تنفيذ هذه الوظيفة على جانب الخادم، حيث يمكن للخادم التحقق من إشارة الإلغاء وإنهاء معالجة الطلب وفقًا لذلك.

الختام

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