تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة/

...

/

تكوين مثيلات Axios لإعادة الاستخدام

تكوين مثيلات Axios لإعادة الاستخدام

تعرف على كيفية إنشاء مثيل Axios قابل لإعادة الاستخدام مع عنوان URL أساسي مشترك ورؤوس وأوقات انتظار.

سنغطي ما يلي...

مع نمو المشاريع، تتزايد استدعاءات واجهة برمجة API) - جلب المستخدمين والمنشورات والتعليقات والإعدادات - كل منها يتطلب عناوين متطابقة، ومواعيد نهائية، ومعالجة أخطاء. كتابة هذه الخيارات في كلaxios.get() تُسبب هذه الدعوة تكرارًا وعدم اتساق. يُشجع React على إمكانية التركيب وإعادة الاستخدام، ويُسهّل Axios ذلك من خلال المثيلات .

فهم مثيل Axios

يتيح لنا مثيل Axios تحديد جميع إعداداتنا الافتراضية - مثل عنوان URL الأساسي، والرؤوس المشتركة، ومهلة الانتظار - مرة واحدة، وإعادة استخدامها في كل مكان. هذا يُبقي المكونات مُركزة على منطق العرض، بينما تبقى تفاصيل واجهة برمجة API مُجردة بشكل مُرتب.

نسخة Axios هي نسخة مُعدّة مسبقًا من Axios. بدلًا من استخدام الإصدار العالميaxios ، نقوم بإنشاء نسختنا الخاصة بإعدادات افتراضية محددة.

import axios from "axios";
const client = axios.create({
  baseURL: "/api",
  timeout: 2000,
  headers: { "X-App-Source": "Educative" },
});
Creating a reusable Axios instance with shared defaults like base URL, for cleaner and consitent API calls

في كل مرة نتصلclient.get() أوclient.post() يستخدم Axios هذه الإعدادات الافتراضية تلقائيًا — حتى لا نضطر إلى تكرارها.

يحافظ هذا النمط على نظافة تطبيقات React الكبيرة، ويسهل لاحقًا إرفاق أدوات الاعتراض للمصادقة أو التسجيل.

A single Axios instance provides shared configuration for all components, ensuring consistent and reusable network logic
A single Axios instance provides shared configuration for all components, ensuring consistent and reusable network logic

مثال: مركزية تكوين Axios

يوضح هذا المثال كيفية تعريف نسخة Axios قابلة لإعادة الاستخدام، واستيرادها إلى عدة مكونات، والحفاظ على مركزية التكوين. تُركز نسخة Axios التكوين مرة واحدة وتُعيد استخدامه في كل مكان، مما يضمن الاتساق وسهولة الصيانة. تستورد المكونات وتستدعي ببساطة ...