أساسيات Axios

طلب GET

كيفية إجراء طلب GET لجلب البيانات من Server

Async/Await

async function fetchData() {
  try {
    const resp = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(resp.data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

Then/Catch

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(resp => {
    console.log(resp.data)
  })
  .catch(error => {
    console.error(error)
  });

طلب POST

كيفية إجراء طلب POST لإرسال بيانات إلى Server

Async/Await

async function sendData() {
  try {
    const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'Axios Guide',
      body: 'This is a detailed guide for Axios',
      userId: 1
    });
    console.log(resp.data);
  } catch (error) {
    console.error(error);
  }
}
sendData();

Then/Catch

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios Guide',
  body: 'This is a detailed guide for Axios',
  userId: 1
})
  .then(resp => {
    console.log(resp.data)
  })
  .catch(error => {
    console.error(error)
  });

إضافة ال Headers

Request يحتوي على قسمين أو جزئين وهما Header و Body.

حيث يكون Body هو عبارة عن البيانات أو الملفات التي يتم إرسالها مع الطلب Request مثل أن تقوم بإرسال بيانات من نوع JSON لإرسال معلومات مهمة مثل بيانات تسجيل دخول أو إرسال ملفات مثل صور أو فيديوهات أو مستندات أو غيرها.

أما Header فهو يحتوي على معلومات إضافية تُرسل مع كل طلب HTTP. معظم هذه المعلومات تُرسل تلقائيًا. في هذا المثال، يتم إرسال Authorization header الذي يحتوي على token بصيغة Bearer ${token}. يُستخدم هذا الـ header للمصادقة على الطلب، حيث يتحقق Server من هوية المستخدم بناءً على الـ token المرسل في الـ header.

إضافة ال Headers إلى طلب GET

async function fetchData() {
  try {
    const token = localStorage.getItem('token');
    const resp = await axios.get('https://api.example.com', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    console.log(resp.data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

إضافة ال Headers إلى طلب POST

async function sendData() {
  try {
    const token = localStorage.getItem('token');
    const resp = await axios.post('https://api.example.com/add-user',
    { name: 'Kamal' },
    {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    console.log(resp.data);
  } catch (error) {
    console.error(error);
  }
}
sendData();

الإعدادات الرئيسية في Axios

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

عند استخدام React، يتم عادةً إضافة الإعدادات الرئيسية في ملف index.js لضمان تطبيق هذه التعديلات على مستوى التطبيق بالكامل.

index.js

import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer your_token';

• baseURL هو الرابط الأساسي الذي يتم إضافته إلى جميع Requests. هذا يعني أنه لا حاجة لكتابة الرابط الكامل مع كل طلب axios.get('/posts'), و سيُضاف baseURL تلقائيًا إلى الطلب ليصبح: https://jsonplaceholder.typicode.com/posts
• يمكنك تحديد الـ Headers التي تُستخدم مع جميع Requests. على سبيل المثال، إذا كنت تحتاج إلى إضافة Authorization header مع كل طلب
• إضافة Ttmeout ليتم تحديد المدة الزمنية القصوى (بالملي ثانية) التي سيتم انتظارها لإتمام الطلب. إذا لم يتم إتمام الطلب في الوقت المحدد، سيتم إلغاؤه.