Axios Post Method

  1. ما هي POST ومتى نستخدمها
  2. شكل axios.post والبارامترات
  3. أنواع البيانات اللي نرسلها في POST
  4. أهم خيارات config مع POST
  5. التعامل مع الأخطاء (بشكل احترافي)
  6. أفضل طرق الكتابة (أفضل Practice)
  7. أمثلة في React (أكثر من مثال)
1️⃣ ما هي POST ومتى نستخدمها؟

HTTP Method: POST

نستخدمها لما نحب:

  • نضيف سجل جديد في قاعدة البيانات (إنشاء مستخدم، منشور، تعليق…)
  • نرسل بيانات فورم (تسجيل، تسجيل دخول، رفع ملف…)
  • أحيانًا لتنفيذ عملية في السيرفر (مثلاً: عملية شراء، إرسال إيميل…)

الفرق عن GET:

  • GET → جلب بيانات فقط (بدون body عادةً).
  • POST → إرسال بيانات للسيرفر داخل الـ body.
2️⃣ شكل axios.post الأساسي

الصيغة العامة:

axios.post(url, data?, config?)
JavaScript
  • url → رابط الـ API (إجباري)
  • data → البيانات اللي تبغى ترسلها في الـ body (اختياري)
  • config → إعدادات إضافية للطلب (headers, params, timeout… إلخ) (اختياري)

مثال بسيط:

axios.post('https://api.example.com/posts', {
  title: 'Hello World',
  body: 'This is my first post',
  userId: 1,
});
JavaScript

هنا:

  • data عبارة عن object
  • Axios يحوله تلقائيًا إلى JSON ويرسل Header:
    • Content-Type: application/json
3️⃣ أنواع البيانات اللي نرسلها مع POST
🔹 (1) JSON عادي (الأكثر استخدامًا)
axios.post('/api/login', {
  email: '[email protected]',
  password: '123456',
});
JavaScript

Axios في المتصفح تلقائيًا:

  • يعمل JSON.stringify للـ object.
  • يرسل Header: Content-Type: application/json;charset=utf-8
🔹 (2) FormData (مهم جدًا لرفع الملفات)

لو عندك فورم فيه صورة + بيانات:

const formData = new FormData();
formData.append('title', 'My Post');
formData.append('image', file); // file كائن File جاي من input type="file"

axios.post('/api/posts', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});
JavaScript

نستخدم FormData لما:

  • نرفع ملفات (صور، PDF، …)
  • أو نحتاج multipart/form-data عمومًا.
🔹 (3) x-www-form-urlencoded (مثل فورم HTML قديم)

بعض الـ APIs (خصوصًا القديمة أو بعض الـ Backends) تحب تستقبل البيانات بهذه الطريقة.

تقدر تستخدم URLSearchParams:

const params = new URLSearchParams();
params.append('username', 'ahmed');
params.append('password', '123456');

axios.post('/api/login', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});
JavaScript
4️⃣ خيارات config مع POST (نفس GET تقريبًا + body)

كل اللي شرحناه في GET ينطبق هنا تقريبًا.

axios.post(url, data, {
  params: { ... },      // Query string
  headers: { ... },     // هيدرات إضافية
  timeout: 5000,        // مهلة الطلب
  withCredentials: true,// إرسال cookies بين الدومينات
  responseType: 'json', // نوع الرد
  onUploadProgress,     // تتبع رفع الملفات
  validateStatus,       // التحكم في متى يعتبر الطلب ناجح
});
JavaScript
أهم اللي يهمك الآن:

✅ params

لو تبغى Body + Query في نفس الوقت:

axios.post('/api/posts', 
  { title: 'title', body: 'body' }, 
  { params: { lang: 'ar' } }
);
JavaScript

النتيجة:

  • Body: { title, body }
  • URL: /api/posts?lang=ar

✅ headers

مثال مع التوكن:

axios.post('/api/posts', 
  { title, body },
  {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }
);
JavaScript
✅ onUploadProgress (مفيد لرفع الملفات)
axios.post('/api/upload', formData, {
  onUploadProgress: (progressEvent) => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log('Progress:', percent);
  },
});
JavaScript
5️⃣ اكتشاف الأخطاء مع POST (Error Handling)

Axios لما يحصل خطأ، يرمي error فيه 3 احتمالات مهمّة:

try {
  const res = await axios.post('/api/login', { email, password });
} catch (error) {
  if (error.response) {
    // 1) السيرفر رد بالفعل لكن بكود خطأ (400, 422, 500...)
    console.log('Status:', error.response.status);
    console.log('Data:', error.response.data);   // رسائل خطأ من السيرفر
  } else if (error.request) {
    // 2) الطلب طلع من جهازك لكن ما فيه رد من السيرفر
    console.log('No response from server');
  } else {
    // 3) مشكلة في إعداد الطلب نفسه
    console.log('Error:', error.message);
  }
}
JavaScript
أمثلة واقعية:
  • 422 Unprocessable Entity → رسائل تحقق (Validation) من Laravel مثلاً.
  • 401 Unauthorized → بيانات تسجيل الدخول غلط.
  • 500 → مشكلة في السيرفر.
6️⃣ أفضل طرق كتابة POST (Best Practices)
✅ استخدم async/await بدل then المتسلسل

بدل:

axios.post(...).then(...).catch(...)
JavaScript

أفضل:

try {
  const res = await axios.post(...);
  //...
} catch (err) {
  //...
}
JavaScript

أوضح وأسهل للقراءة خصوصًا مع React.

✅ استخدام instance واحد للـ API

بدل ما تكتب baseURL والهيدرات كل مرة، اعمل ملف api.js:

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
});

export default api;
JavaScript

ثم:

import api from './api';

const res = await api.post('/posts', { title, body });
JavaScript

تقدّر تزيد عليه Interceptors لاحقًا (للتوكن).

✅ إدارة حالة (loading / error) في React

دائمًا مع أي POST في React:

  • loading → عشان تعطل الزر وتعرض “جاري الإرسال…”
  • error → تعرض رسالة خطأ
  • success أو إعادة توجيه أو تنظيف الفورم بعد النجاح
7️⃣ أمثلة عملية في React
🧪 مثال 1: فورم تسجيل دخول (Login) بـ axios.post
// LoginForm.jsx
import React, { useState } from 'react';
import axios from 'axios';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault(); // منع إعادة تحميل الصفحة
    setLoading(true);
    setError(null);

    try {
      const response = await axios.post('https://example.com/api/login', {
        email,
        password,
      });

      console.log('Login success:', response.data);

      // مثال: حفظ التوكن في localStorage
      // localStorage.setItem('token', response.data.token);

      alert('تم تسجيل الدخول بنجاح');
    } catch (err) {
      if (err.response) {
        // خطأ من السيرفر (مثلاً 401)
        setError(err.response.data.message || 'بيانات الدخول غير صحيحة');
      } else if (err.request) {
        setError('لا يوجد استجابة من السيرفر، حاول لاحقًا');
      } else {
        setError('حدث خطأ غير متوقع');
      }
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>تسجيل الدخول</h2>

      <div>
        <label>البريد الإلكتروني</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>

      <div>
        <label>كلمة المرور</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>

      {error && <p style={{ color: 'red' }}>{error}</p>}

      <button type="submit" disabled={loading}>
        {loading ? 'جاري الإرسال...' : 'دخول'}
      </button>
    </form>
  );
}

export default LoginForm;
JavaScript

نلاحظ:

  • axios.post(url, { email, password })
  • إدارة:
    • loading
    • error
  • استخدام try/catch واكتشاف أنواع الأخطاء.
🧪 مثال 2: إضافة منشور جديد (Create Post) + تحديث الـ state
// CreatePost.jsx
import React, { useState } from 'react';
import axios from 'axios';

function CreatePost({ onPostCreated }) {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleCreatePost = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const res = await axios.post(
        'https://jsonplaceholder.typicode.com/posts',
        {
          title,
          body,
          userId: 1,
        }
      );

      // res.data يحتوي على البوست اللي رجع من API
      console.log('Created post:', res.data);

      // نخبر الأب (لو مررنا له onPostCreated) عشان يضيف البوست مباشرة للقائمة
      if (onPostCreated) {
        onPostCreated(res.data);
      }

      // تنظيف الفورم
      setTitle('');
      setBody('');
    } catch (err) {
      setError('حدث خطأ أثناء إنشاء المنشور');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleCreatePost}>
      <h2>إنشاء منشور جديد</h2>

      <div>
        <label>العنوان</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
      </div>

      <div>
        <label>المحتوى</label>
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          required
        />
      </div>

      {error && <p style={{ color: 'red' }}>{error}</p>}

      <button type="submit" disabled={loading}>
        {loading ? 'جاري الحفظ...' : 'حفظ'}
      </button>
    </form>
  );
}

export default CreatePost;
JavaScript

مناسب جدًا لـ LMS مثلًا:

  • إنشاء كورس جديد
  • إضافة درس
  • إرسال واجب… إلخ.
🧪 مثال 3 (سريع): رفع ملف مع بيانات
const handleUpload = async (e) => {
  e.preventDefault();

  const formData = new FormData();
  formData.append('title', title);
  formData.append('file', file); // file جاي من input type="file"

  try {
    const res = await axios.post('/api/materials', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: (event) => {
        const percent = Math.round((event.loaded * 100) / event.total);
        console.log('Upload:', percent, '%');
      },
    });

    console.log('Uploaded:', res.data);
  } catch (err) {
    console.error(err);
  }
};
JavaScript
خلاصة سريعة
  • axios.post(url, data, config):
    • data = JSON / FormData / URLSearchParams
    • config = params, headers, timeout, onUploadProgress، إلخ…
  • استخدم async/await + try/catch دايمًا للوضوح.
  • راقب error.response عشان تستفيد من رسائل التحقق من الباك إند.
  • في React:
    • دايمًا إدارة loading + error + تنظيف البيانات بعد النجاح.
import axios from "axios"
import { useState } from "react"
function Add() {

    const [title , setTitle] = useState("");
    const [body , setBody] = useState("");

    
    const handelSubmit = async (e)=> {

        e.preventDefault();

        try {
             const res = await  axios.post("http://localhost:8000/posts2" , {
                title , body
        });
        }catch(err) {
            console.log(err.message)
        } 
    }

  return (
    <div>
      <form onSubmit={handelSubmit}>
          <label htmlFor="">title:</label>
        <input type="text" onChange={(e)=> setTitle(e.target.value)}/>
    
        <br />
   
        <label htmlFor="">body:</label>
        <input type="text"  onChange={(e)=> setBody(e.target.value)}/>
      
        <button type="submit" className="btn btn-success">Send </button>
      </form>
    </div>
  )
}

export default Add
JavaScript