التعامل مع Interceptors

تُعتبر Interceptors في Axios أدوات قوية تُتيح لك تعديل جميع Requests قبل أن تصل إلى الخادم (Server) وجميع Responses قبل أن تصل إلى تطبيقك. هذه العملية تتم مرة واحدة فقط عند إعداد Axios، مما يعني أنك لست بحاجة لتكرار نفس التعديلات مع كل طلب أو استجابة.

عند استخدام React، يتم عادةً إضافة Interceptors في ملف index.js لضمان تطبيق هذه التعديلات على مستوى التطبيق بالكامل. وتجدر الإشارة إلى أن الأمثلة الواردة أدناه تمثل بعض الاستخدامات الشائعة فقط، مثل إضافة Authorization Headers أو تعديل الاستجابات لاستخراج خاصية data.

إضافة Authorization لجميع Requests

أولاً، يتم إضافة Axios باستخدام import axios from 'axios'. بعد ذلك، يتم تعريف Interceptor باستخدام axios.interceptors.request.use. الهدف من هذا Interceptor هو إضافة token إلى headers الخاص بكل طلب يتم إرساله.

يتم جلب token المخزن مسبقا في localStorage باستخدام localStorage.getItem('token'). إذا كان token موجودًا (أي ليس فارغًا)، يتم إضافته إلى headers الطلب باسم Authorization، بصيغة Bearer⠀${token}. وأخيرًا، يتم إعادة النسخة الجديدة لل Request بعد قيامنا بالتعديل عليها.

هذه الطريقة تُستخدم لضمان أن جميع Requests تحتوي تلقائيًا على token، مما يوفر وقتًا ويمنع التكرار في الكود.

index.js

import axios from 'axios';

axios.interceptors.request.use(request => {
  const token = localStorage.getItem('token');
  if (token)
    request.headers.Authorization = `Bearer ${token}`;
  return request;
});

تعديل Responses لاستخراج data فقط

أولاً، يتم إضافة Axios باستخدام import axios from 'axios'. بعد ذلك، يتم تعريف Interceptor باستخدام axios.interceptors.response.use.

يتم تعديل Response بحيث يتم إرجاع data فقط. هذا يعني أن أي جزء آخر من Response يتم تجاهله، ويتم تسليم البيانات فقط.

هذا الأسلوب يُبسط استخدام Axios عند التعامل مع البيانات، حيث يمكنك التركيز مباشرة على محتوى البيانات دون الحاجة إلى الوصول إليها عبر response.data في كل مرة.

index.js

import axios from 'axios';

axios.interceptors.response.use(response => {
  return response.data;
});