عميل HTTP بلغة JavaScript: تقديم الطلبات بشكل صحيح من الألف إلى الياء

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

عميل HTTP بلغة JavaScript: تقديم الطلبات بشكل صحيح — من الألف إلى الياء

في تطوير الويب الحديث، يُعد التفاعل مع واجهات API الخارجية والخوادم مهمة أساسية. سواء كان الأمر يتعلق بجلب بيانات الطقس، أو إرسال نموذج، أو التكامل مع بوابة دفع، ستحتاج إلى عميل HTTP. في هذه المقالة، سنشرح كيفية إنشاء طلبات HTTP بلغة JavaScript (Node.js) بشكل صحيح: من اختيار الأداة إلى معالجة الأخطاء والتحسين. ستتعلم كيفية كتابة كود موثوق وفعال.

1. اختيار الأداة: الإمكانيات الأصلية مقابل المكتبات

توفر Node.js عدة طرق لتنفيذ طلبات HTTP. يعتمد الاختيار على مدى تعقيد المهمة والتفضيلات الشخصية.

1.1. الوحدة المدمجة `http` / `https`

هذه هي الطريقة الأكثر انخفاضًا في المستوى. تمنحك تحكمًا كاملاً، ولكنها تتطلب الكثير من الأكواد للطلبات البسيطة.

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. `fetch` العام (مع Node.js 18+)

بدءًا من الإصدار 18، ظهر fetch الأصلي في Node.js، المألوف من المتصفحات. هذه واجهة برمجة تطبيقات حديثة ومريحة.

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Fetch error:', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. المكتبات الشائعة: `axios`

axios هي المكتبة الأكثر شيوعًا لطلبات HTTP. توفر واجهة برمجة تطبيقات مريحة، ودعمًا للـ Promises، والمعترضات (interceptors)، والتحليل التلقائي لـ JSON.

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: 'دراسة عملاء HTTP',      completed: false,      userId: 1    });    console.log('تم الإنشاء:', response.data);    return response.data;  } catch (error) {    console.error('خطأ:', error.response?.data || error.message);  }}

createTodo();

الخلاصة: بالنسبة للنصوص البرمجية البسيطة، استخدم fetch. للمشاريع الجادة التي تحتوي على العديد من الطلبات والمعترضات، استخدم axios. اترك وحدة http للحالات الخاصة.

2. أنواع الطلبات الأساسية والعمل مع البيانات

سنشرح كيفية إرسال طلبات GET و POST و PUT و DELETE بشكل صحيح باستخدام axios.

2.1. GET — جلب البيانات

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`فشل في جلب المستخدم ${id}: ${error.message}`);  }}

2.2. POST — إنشاء مورد

نقوم بتمرير البيانات في جسم الطلب. من المهم تحديد نوع المحتوى (Content-Type). يقوم Axios بذلك تلقائيًا لـ JSON.

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}