كيفية استخدام Fetch لإجراء طلبات PUT في React

إذا كنت مطور ويب، من المحتمل أنك تعرف مدى أهمية التواصل مع واجهات برمجة التطبيقات (APIs) وجلب البيانات من مصادر خارجية. توفر React، مكتبة JavaScript الشهيرة لبناء واجهات المستخدم، وسيلة بسيطة وأنيقة للقيام بذلك باستخدام Fetch API.

Fetch API هي واجهة حديثة لعمل طلبات HTTP من المتصفح. تستخدم وعود JavaScript، مما يجعل العمل مع العمليات غير المتزامنة أسهل وأكثر وضوحًا. يمكنك استخدام Fetch API لعمل أنواع مختلفة من الطلبات، مثل GET و POST و DELETE و PUT.

في هذه التدوينة، سنركز على كيفية استخدام Fetch API لعمل طلبات PUT في React. يُستخدم طلب PUT لتحديث أو استبدال مورد موجود على الخادم. على سبيل المثال، قد ترغب في استخدام طلب PUT لتعديل تدوينة، تحديث ملف تعريف مستخدم، أو تغيير سعر منتج.

ما هو طلب PUT ومتى يتم استخدامه

طلب PUT هو أحد أربعة طرق HTTP الأساسية HTTP methods، إلى جانب GET و POST و DELETE. يُستخدم طلب PUT لتحديث أو استبدال مورد موجود على الخادم. يحتوي جسم الطلب عادةً على البيانات التي تريد تحديثها أو استبدالها.

على سبيل المثال، افترض أن لديك تدوينة تحتوي على البيانات التالية:

{
  "id": 1,
  "title": "كيفية استخدام Fetch لعمل طلبات GET في React",
  "content": "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات GET في React...",
  "author": "David",
  "date": "2023-01-01"
}

إذا كنت تريد تغيير العنوان ومحتوى التدوينة، يمكنك استخدام طلب PUT لإرسال البيانات الجديدة إلى الخادم. ستكون URL الطلب شيئًا مثل https://example.com/api/posts/1، حيث 1 هو معرف التدوينة. سيكون جسم الطلب شيئًا مثل:

{
  "title": "كيفية استخدام Fetch لعمل طلبات PUT في React",
  "content": "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات PUT في React..."
}

ثم سيقوم الخادم بتحديث التدوينة بالبيانات الجديدة وإعادة استجابة تحتوي على المورد المحدث أو رسالة تأكيد.

طلب PUT يختلف عن طلب POST، الذي يُستخدم لإنشاء مورد جديد على الخادم. لا يتطلب طلب POST معرفًا أو URL معين، بينما يتطلب طلب PUT ذلك. قد يؤدي طلب POST إلى إنشاء مورد مكرر إذا تم تكراره، بينما يكون طلب PUT مؤيدًا، مما يعني أنه لن يغير حالة الخادم إذا تم تكراره.

طلب PUT يختلف أيضًا عن طلب PATCH، الذي يُستخدم لتحديث جزء من مورد موجود على الخادم. يرسل طلب PATCH فقط البيانات التي تحتاج إلى تغيير، بينما يرسل طلب PUT كل البيانات التي تحل محل المورد الأصلي. طلب PATCH أكثر كفاءة ومرونة، لكن ليس كل الخوادم تدعمه.

كيفية عمل طلب PUT بسيط باستخدام Fetch API

عمل طلب PUT باستخدام Fetch API سهل جدًا ومباشر. كل ما تحتاجه هو استدعاء طريقة fetch()، وتمرير URL لجلب البيانات منه، وتوفير كائن خيارات مع طريقة الطلب، الرؤوس، والجسم. ثم يمكنك التعامل مع الاستجابة عندما يتم حلها.

إليك مثال على كيفية عمل طلب PUT بسيط باستخدام Fetch API:

// تحديد البيانات للتحديث
const data = {
  title: "كيفية استخدام Fetch لعمل طلبات PUT في React",
  content: "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات PUT في React..."
};

// تحديد خيارات الطلب
const requestOptions = {
  method: "PUT", // تحديد طريقة الطلب
  headers: { "Content-Type": "application/json" }, // تحديد نوع المحتوى
  body: JSON.stringify(data) // إرسال البيانات بصيغة JSON
};

// تنفيذ الطلب
fetch("https://example.com/api/posts/1", requestOptions)
  .then(response => response.json()) // تحليل الاستجابة كـ JSON
  .then(data => console.log(data)) // القيام بشيء ما مع البيانات
  .catch(error => console.error(error)); // التعامل مع الأخطاء

في هذا المثال، نقوم بتحديث تدوينة بعنوان 1 على الخادم. نحن نرسل العنوان الجديد والمحتوى في جسم الطلب، ونحدد نوع المحتوى كـ application/json. نحن أيضًا نستخدم طريقة json() لتحليل الاستجابة كـ JSON، ونسجل البيانات في وحدة التحكم. إذا كانت هناك خطأ، نقوم بالقبض عليه وتسجيله في وحدة التحكم أيضًا.

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

كيفية استخدام هوoks React لعمل طلب PUT في مكون وظيفي

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

للقيام بذلك، يمكنك استخدام هوoks React، وهي وظائف خاصة تتيح لك استخدام الحالة وميزات React الأخرى في المكونات الوظيفية. الهوoks الأكثر شيوعًا هي useState و useEffect.

هوك useState يسمح لك بإعلان متغير حالة ووظيفة لتحديثه. يتم تمرير الحالة الأولية كوسيلة إلى الهوك، والقيمة المعادة هي مصفوفة تحتوي على متغير الحالة ووظيفة التحديث. يمكنك استخدام متغير الحالة لتخزين البيانات التي تريد عرضها في واجهة المستخدم، ووظيفة التحديث لتحديث الحالة عندما تتغير البيانات.

هوك useEffect يتيح لك أداء تأثيرات جانبية، مثل إجراء طلبات HTTP، في المكونات الوظيفية. الحجة الأولى هي وظيفة تعمل بعد عرض المكون، والحجة الثانية هي مصفوفة من التبعيات التي تحدد متى يعمل التأثير. إذا قمت بتمرير مصفوفة فارغة، سيعمل التأثير مرة واحدة فقط عندما يتم تحميل المكون، مشابهًا لطريقة دورة الحياة componentDidMount في مكونات الفئة.

إليك مثال على كيفية استخدام هوoks React لعمل طلب PUT في مكون وظيفي:

import React, { useState, useEffect } from "react";

function App() {
  // إعلان متغير حالة لتخزين البيانات
  const [data, setData] = useState(null);

  // تحديد البيانات للتحديث
  const newData = {
    title: "كيفية استخدام Fetch لعمل طلبات PUT في React",
    content: "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات PUT في React..."
  };

  // تحديد خيارات الطلب
  const requestOptions = {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newData)
  };

  // استخدام هوك useEffect لعمل الطلب
  useEffect(() => {
    // تنفيذ الطلب
    fetch("https://example.com/api/posts/1", requestOptions)
      .then(response => response.json()) // تحليل الاستجابة كـ JSON
      .then(data => setData(data)) // تحديث الحالة بالبيانات
      .catch(error => console.error(error)); // التعامل مع الأخطاء
  }, []); // تمرير مصفوفة فارغة كالحجة الثانية لتشغيل التأثير مرة واحدة فقط

  // إعادة JSX للرسم
  return (
    <div className="App">
      <h1>كيفية استخدام Fetch لعمل طلبات PUT في React</h1>
      {data ? ( // التحقق مما إذا كانت البيانات متاحة
        <div>
          <h2>{data.title}</h2> // عرض البيانات
          <p>{data.content}</p>
        </div>
      ) : (
        <p>جار التحميل...</p> // عرض رسالة التحميل
      )}
    </div>
  );
}

export default App;

في هذا المثال، نستخدم هوك useState لإعلان متغير حالة يسمى data ووظيفة تسمى setData لتحديثه. الحالة الأولية هي null، مما يعني أنه لا توجد بيانات متاحة بعد.

نستخدم أيضًا هوك useEffect لعمل طلب PUT عند تحميل المكون. نحن نستخدم نفس الصياغة كما من قبل، ولكن بدلاً من تسجيل البيانات في وحدة التحكم، نقوم بتحديث الحالة باستخدام وظيفة setData. نحن نمرر مصفوفة فارغة كالحجة الثانية لهوك useEffect، بحيث يعمل التأثير مرة واحدة فقط.

كيفية استخدام async/await لعمل طلب PUT باستخدام Fetch API

Async/await هي ميزة من JavaScript الحديثة التي تتيح لك كتابة التعليمات البرمجية غير المتزامنة بطريقة أكثر وضوحًا وايجازًا. تعمل مع الوعود، وهي كائنات تمثل نتيجة عملية غير متزامنة. يمكن أن تُحل الوعود (مع قيمة) أو تُرفض (مع خطأ).

للاستخدام async/await لعمل طلب PUT باستخدام Fetch API، تحتاج إلى اتباع الخطوات التالية:

• حدد وظيفة غير متزامنة ستقوم بعمل الطلب. وظيفة غير متزامنة هي وظيفة تعيد وعدًا. يمكنك استخدام الكلمة الرئيسية async قبل إعلان أو تعبير الوظيفة.
• داخل الوظيفة غير المتزامنة، استخدم الكلمة الرئيسية await للانتظار حتى يُحل الوعد المعاد من طريقة fetch(). توقف الكلمة الرئيسية await تنفيذ الوظيفة غير المتزامنة حتى يتم حل الوعد أو رفضه. ثم تعود بالقيمة المحلولة أو تُلقي خطأ.
• استخدم الكلمة الرئيسية await مرة أخرى للانتظار حتى يُحل الوعد المعاد من طريقة response.json()، التي تحلل جسم الاستجابة كـ JSON وتعيد وعدًا آخر.
• قم بمعالجة البيانات أو الخطأ كما تشاء. يمكنك استخدام كتل try...catch للإمساك بأي أخطاء قد تحدث خلال العملية غير المتزامنة.

إليك مثال لوظيفة غير متزامنة تعمل على إجراء طلب PUT باستخدام Fetch API:

// تعريف وظيفة غير متزامنة تقوم بعمل طلب PUT
async function updatePost() {
  // تحديد البيانات للتحديث
  const data = {
    title: "كيفية استخدام Fetch لعمل طلبات PUT في React",
    content: "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات PUT في React..."
  };

  // تحديد خيارات الطلب
  const requestOptions = {
    method: "PUT", // تحديد طريقة الطلب
    headers: { "Content-Type": "application/json" }, // تحديد نوع المحتوى
    body: JSON.stringify(data) // إرسال البيانات بصيغة JSON
  };

  // استخدام try...catch للتعامل مع الأخطاء
  try {
    // استخدام await للانتظار حتى يُحل الوعد المعاد من fetch()
    const response = await fetch("https://example.com/api/posts/1", requestOptions);
    // استخدام await للانتظار حتى يُحل الوعد المعاد من response.json()
    const data = await response.json();
    // القيام بشيء ما مع البيانات
    console.log(data);
  } catch (error) {
    // التعامل مع الخطأ
    console.error(error);
  }
}

// استدعاء الوظيفة غير المتزامنة
updatePost();

كيفية التعامل مع الأخطاء وحالات التحميل عند إجراء طلب PUT باستخدام Fetch API

عند إجراء طلب PUT باستخدام Fetch API، قد تواجه أنواعًا مختلفة من الأخطاء، مثل أخطاء الشبكة، أخطاء HTTP، أو أخطاء تحليل JSON. تحتاج إلى التعامل مع هذه الأخطاء بشكل صحيح وتوفير ملاحظات مناسبة للمستخدم.

التعامل مع الأخطاء عند إجراء طلب PUT

طريقة واحدة للتعامل مع الأخطاء هي استخدام طريقة catch() الخاصة بالوعد المعاد من طريقة fetch(). ستقوم هذه الطريقة بالإمساك بأي أخطاء تحدث أثناء تنفيذ الطلب أو معالجة الاستجابة. يمكنك استخدام خاصية response.ok للتحقق مما إذا كانت حالة الاستجابة تتراوح بين 200 و 299، مما يشير إلى طلب ناجح. إذا لم يكن كذلك، يمكنك رفع خطأ مع حالة الاستجابة أو الرسالة. يمكنك أيضًا استخدام طريقة response.headers.get() للتحقق مما إذا كانت الاستجابة تحتوي على بيانات JSON قبل استدعاء طريقة response.json()، والتي سترفع خطأ إذا لم تكن الاستجابة JSON صالحة.

طريقة أخرى للتعامل مع الأخطاء هي استخدام كتل try...catch مع بناء جملة async/await. هذا يتيح لك كتابة كود غير متزامن بطريقة أكثر وضوحًا وايجازًا. يمكنك استخدام الكلمة الرئيسية await للانتظار للوعد المعاد من طريقة fetch() وطريقة response.json()، والتعامل مع أي أخطاء قد تحدث مع كتلة catch.

إليك بعض الأمثلة على كيفية التعامل مع الأخطاء عند إجراء طلب PUT باستخدام Fetch API:

// استخدام طريقة catch()
fetch("https://example.com/api/posts/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "عنوان جديد" })
})
  .then(response => {
    // التحقق مما إذا كانت الاستجابة ناجحة
    if (!response.ok) {
      // رفع خطأ مع الحالة أو الرسالة
      throw Error(response.status || response.statusText);
    }
    // التحقق مما إذا كانت الاستجابة تحتوي على بيانات JSON
    const isJson = response.headers.get("content-type")?.includes("application/json");
    // تحليل الاستجابة كـ JSON إذا كانت تحتوي عليها، أو إرجاع null إذا لم تكن
    return isJson ? response.json() : null;
  })
  .then(data => {
    // القيام بشيء ما مع البيانات
    console.log(data);
  })
  .catch(error => {
    // التعامل مع الخطأ
    console.error(error);
  });

// استخدام كتل try...catch مع async/await
async function updatePost() {
  try {
    // الانتظار للوعد المعاد من طريقة fetch()
    const response = await fetch("https://example.com/api/posts/1", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: "عنوان جديد" })
    });
    // التحقق مما إذا كانت الاستجابة ناجحة
    if (!response.ok) {
      // رفع خطأ مع الحالة أو الرسالة
      throw Error(response.status || response.statusText);
    }
    // التحقق مما إذا كانت الاستجابة تحتوي على بيانات JSON
    const isJson = response.headers.get("content-type")?.includes("application/json");
    // تحليل الاستجابة كـ JSON إذا كانت تحتوى عليها، أو إرجاع null إذا لم تكن
    const data = isJson ? await response.json() : null;
    // القيام بشيء ما مع البيانات
    console.log(data);
  } catch (error) {
    // التعامل مع الخطأ
    console.error(error);
  }
}

// استدعاء الوظيفة غير المتزامنة
updatePost();

التعامل مع حالة التحميل عند إجراء طلب PUT باستخدام Fetch API

للتعامل مع حالة التحميل، يمكنك استخدام متغير حالة للإشارة إلى ما إذا كان الطلب جاريًا أم لا. يمكنك استخدام هوك useState للإعلان عن وتحديث متغير الحالة في مكون وظيفي. يمكنك تعيين متغير الحالة إلى true قبل إجراء الطلب، وتعليقه على false بعد اكتمال الطلب أو فشله. يمكنك حينها استخدام متغير الحالة لعرض مؤشر تحميل أو البيانات في واجهة المستخدم بشكل شرطي.

إليك مثال على كيفية التعامل مع حالة التحميل عند إجراء طلب PUT باستخدام Fetch API في مكون وظيفي:

import React, { useState } from "react";

function App() {
  // إعلان متغير حالة لتخزين البيانات
  const [data, setData] = useState(null);
  // إعلان متغير حالة للإشارة إلى حالة التحميل
  const [loading, setLoading] = useState(false);

  // تحديد البيانات للتحديث
  const newData = {
    title: "كيفية استخدام Fetch لعمل طلبات PUT في React",
    content: "في هذه التدوينة، سوف نتعلم كيفية استخدام Fetch API لعمل طلبات PUT في React..."
  };

  // تحديد خيارات الطلب
  const requestOptions = {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newData)
  };

  // تعريف وظيفة لعمل الطلب
  function updatePost() {
    // تعيين حالة التحميل إلى true
    setLoading(true);
    // تنفيذ الطلب
    fetch("https://example.com/api/posts/1", requestOptions)
      .then(response => {
        // التحقق مما إذا كانت الاستجابة ناجحة
        if (!response.ok) {
          // رفع خطأ مع الحالة أو الرسالة
          throw Error(response.status || response.statusText);
        }
        // التحقق مما إذا كانت الاستجابة تحتوي على بيانات JSON
        const isJson = response.headers.get("content-type")?.includes("application/json");
        // تحليل الاستجابة كـ JSON إذا كانت تحتوي عليها، أو إرجاع null إذا لم تكن
        return isJson ? response.json() : null;
      })
      .then(data => {
        // تحديث الحالة بالبيانات
        setData(data);
        // تعيين حالة التحميل إلى false
        setLoading(false);
      })
      .catch(error => {
        // التعامل مع الخطأ
        console.error(error);
        // تعيين حالة التحميل إلى false
        setLoading(false);
      });
  }

  // إعادة JSX للرسم
  return (
    <div className="App">
      <h1>كيفية استخدام Fetch لعمل طلبات PUT في React</h1>
      <button onClick={updatePost}>تحديث التدوينة</button>
      {loading ? ( // التحقق مما إذا كان الطلب جاريًا
        <p>جار التحميل...</p> // عرض رسالة التحميل
      ) : data ? ( // التحقق مما إذا كانت البيانات متاحة
        <div>
          <h2>{data.title}</h2> // عرض البيانات
          <p>{data.content}</p>
        </div>
      ) : null}
    </div>
  );
}

export default App;

كيفية استخدام Apidog لتوليد كود عميل Fetch بنقرة واحدة

Apidog هي منصة تعتمد على الويب تساعدك على اكتشاف، اختبار، ودمج واجهات برمجة التطبيقات بسهولة. إحدى الميزات التي تقدمها Apidog هي القدرة على توليد كود عميل Fetch بنقرة واحدة، استنادًا إلى مواصفات واجهة برمجة التطبيقات التي تقدمها أو تختارها.

لاستخدام Apidog لتوليد كود عميل Fetch بنقرة واحدة، يمكنك اتباع الخطوات التالية:

• انقر على زر "API جديدة" على لوحة التحكم أو اختر واجهة برمجة تطبيقات موجودة من القائمة.

• انقر على "توليد كود العميل". ستستخدم Apidog محرك OpenAPI Generator لتوليد كود عميل Fetch لواجهة برمجة التطبيقات الخاصة بك، مطابقًا لنقاط النهاية وهياكل البيانات التي قمت بتعريفها أو اختيارها.

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

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

هذا كل شيء! لقد استخدمت بنجاح Apidog لتوليد كود عميل Fetch بنقرة واحدة. يمكنك استخدام هذه الميزة لتوفير الوقت وتجنب الأخطاء عند العمل مع واجهات برمجة التطبيقات على الويب. يمكنك أيضًا استكشاف ميزات أخرى تقدمها Apidog، مثل توثيق واجهة برمجة التطبيقات، وتصحيح واجهة برمجة التطبيقات، والمحاكاة، والاختبار التلقائي لواجهة برمجة التطبيقات.

استنتاج

في هذه التدوينة، تعلمنا كيفية استخدام Fetch API لعمل طلبات PUT. يوفر Fetch API طريقة حديثة وسهلة للتواصل مع واجهات برمجة التطبيقات في المتصفح، وتوفر React وسيلة قوية وإعلانية لإنشاء واجهات مستخدم تعتمد على البيانات. من خلال دمج هاتين التقنيتين، يمكننا إنشاء تطبيقات ويب ديناميكية وتفاعلية تستهلك البيانات من مصادر متعددة.

Apidog توفر القدرة على توليد كود عميل Fetch بنقرة واحدة، استنادًا إلى مواصفات واجهة برمجة التطبيقات التي تقدمها أو تختارها.