Axios: عميل HTTP لـ TypeScript

ما هو Axios؟

Axios هو عميل HTTP شائع للمتصفح و Node.js، مكتوب بلغة TypeScript. يوفر واجهة برمجة تطبيقات (API) مريحة وحديثة لتنفيذ طلبات HTTP غير المتزامنة. تقوم المكتبة تلقائياً بمعالجة بيانات JSON، وتدعم المعترضات (interceptors)، والحماية من CSRF، وإلغاء الطلبات.

لماذا نحتاج Axios؟

على عكس fetch المدمج، يقدم Axios بناء جملة أكثر سهولة، وتحويلاً تلقائياً للبيانات، ومعالجة مدمجة للأخطاء. إنه مثالي لإنشاء عملاء REST API، والعمل مع المصادقة، وتحميل الملفات. بفضل دعم TypeScript، تحصل على كتابة صارمة (strict typing) لجميع الطلبات والاستجابات.

التثبيت

لتثبيت Axios في المشروع، استخدم npm أو yarn:

npm install axios# أوyarn add axios

للعمل مع TypeScript، قم بتثبيت الأنواع (عادة ما تكون مضمنة بالفعل):

npm install @types/axios

الوظائف الأساسية

دعم جميع طرق HTTP: GET, POST, PUT, DELETE, PATCH وغيرها.
التسلسل التلقائي لـ JSON: يتم تحويل البيانات تلقائياً.
المعترضات (interceptors): يمكن معالجة الطلبات والاستجابات بشكل عام (مثل إضافة الرموز المميزة).
إلغاء الطلبات: باستخدام CancelToken أو AbortController.
تحميل الملفات: دعم تقدم التحميل عبر onUploadProgress.
الحماية من CSRF: العمل التلقائي مع الكوكيز والروؤس (headers).
الكتابة (Typing): دعم كامل لـ TypeScript مع الأدوية (generics).

مثال على كود TypeScript

طلب GET أساسي مع كتابة الاستجابة:

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// الاستخدامgetUser(1).then(user => console.log(user.name));

مثال على طلب POST مع إرسال البيانات:

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

مثال مع معترض لإضافة رمز مميز:

import axios from 'axios';

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