راهنمای به کارگیری API های REST در React - راهنمای مبتدیان ری اکت

ری اکت React یک کتابخانه فرانت اند frontend محبوب است که توسعه دهندگان از آن برای ایجاد برنامه های کاربردی استفاده می کنند. و اگر می‌خواهید برنامه‌های آماده تولید بسازید، باید APIها را در برنامه React خود ادغام کنید.

هر توسعه‌دهنده‌ای که می‌خواهد برنامه‌های وب مدرن و قوی با ری اکت React بسازد، باید بداند که چگونه از APIها برای واکشی داده‌ها در برنامه‌های React خود استفاده کند.

در این راهنمای مبتدیان، نحوه استفاده از RESTful API را در React، از جمله واکشی fetching، حذف و افزودن داده ها یاد خواهید گرفت. ما همچنین به دو روش اصلی برای تغذیه RESTful API و نحوه استفاده از آنها با هوک های ری اکت React hooks خواهیم پرداخت.

درباره چیستی: What is REST API

اگر تا به حال زمانی را صرف برنامه نویسی یا تحقیق در مورد برنامه نویسی کرده اید، احتمالاً با اصطلاح "API" برخورد کرده اید.

این عبارت مخفف چیست؟ API مخفف Application Programming Interface است. این رسانه ای است که به برنامه های مختلف اجازه می دهد تا به صورت برنامه نویسی با یکدیگر ارتباط برقرار کنند و پاسخی را در زمان واقعی برگردانند.

"روی فیلدینگ Roy Fielding" در سال 2000، REST را به عنوان یک سبک معماری و روشی که معمولاً در توسعه خدمات اینترنتی مانند سیستم های ابررسانه ای توزیع شده distributed hypermedia systems استفاده می شود، تعریف کرد. این عبارت مخفف "REpresentational State Transfer" است.

هنگامی که درخواستی از طریق یک REST API انجام می شود، نمایشی از وضعیت فعلی current state منبع برای درخواست کننده requester یا نقطه پایانی endpoint ارسال می کند. این نمایش حالت state representation می تواند به شکل JSON (نمادگذاری ابجکت جاوا اسکریپت= JavaScript Object Notation)، XML یا HTML باشد.

پس متوجه شدید فرمت انتقال به یکی از سه شکلی است که در پاراگراف قبلی بیان شد اما:

جیسون JSON پرکاربردترین فرمت فایل است زیرا مستقل از زبان است و هم توسط انسان و هم ماشین قابل خواندن است.

یک مثال:

[
   {
      &quotuserId&quot: 1,
      &quotid&quot: 1,
      &quottitle&quot: &quotsunt excepturi&quot,
      &quotbody&quot: &quotquia et suscipit\nsuscipit recusandae consequuntur &quot
   },
   {
      &quotuserId&quot: 1,
      &quotid&quot: 2,
      &quottitle&quot: &quotqui est esse&quot,
      &quotbody&quot: &quotest rerum tempore vitae\nsequi sint nihil&quot
   }
]

اگر کدها در مثال بالا به هم ریخته نمایش داده میشوند به عکس زیر توجه نمایید:

اکنون درباره عملکرد Rest API به تصویر زیر دقت فرمایید.

مفاهیم REST API

عناصر کلیدی پارادایم REST API عبارتند از:

• کلاینت یا نرم افزاری که روی رایانه یا گوشی هوشمند کاربر اجرا می شود و ارتباط را آغاز می کند.
• سروری که یک API را به عنوان وسیله ای برای دسترسی به داده ها یا ویژگی های خود ارائه می دهد . و
• یک منبع ، که هر قطعه محتوایی است که سرور می تواند به مشتری ارائه دهد (مثلاً یک ویدیو یا یک فایل متنی یا عکس یا ...).

برای دسترسی به یک منبع resource، مشتری یک درخواست ارسال می کند . سپس، سرور یک پاسخ از داده های کدگذاری شده روی منبع تولید می کند. هر دو نوع پیام REST خود توصیفی self-descriptive هستند، به این معنی که حاوی اطلاعاتی در مورد نحوه تفسیر و پردازش خودشان هستند.

متدهای REST API و ساختار درخواست request

هر درخواست REST شامل چهار بخش اساسی است: یک متد HTTP، یک نقطه پایانی endpoint، هدر و یک بدنه.

یک متد HTTP توصیف می کند که با یک منبع چه کاری باید انجام شود . چهار متد اساسی وجود دارد که اپراتورهای CRUD نیز نامیده می شود:

• پست POST برای ایجاد یک منبع
• گت GET برای دریافت یک منبع
• پوت PUT برای به روز رسانی یک منبع
• دیلیت DELETE برای حذف یک منبع

یک نقطه پایانی endpoint حاوی یک شناسه منبع یکنواخت (URI) است که نشان می دهد کجا و چگونه منبع را در اینترنت پیدا کنید. متداول ترین نوع URI یک مکان منبع منحصر به فرد (URL) است که به عنوان یک آدرس وب کامل عمل می کند.

هدرها Headers اطلاعات مربوط به مشتری و سرور را ذخیره می کنند. به طور عمده، هدرها داده‌های احراز هویت را ارائه می‌کنند - مانند یک کلید API، نام یا آدرس IP رایانه‌ای که سرور در آن نصب شده است، و اطلاعات مربوط به فرمت پاسخ.

یک بدنه body برای انتقال اطلاعات اضافی به سرور استفاده می شود. به عنوان مثال، ممکن است بخشی از داده باشد که می خواهید اضافه یا جایگزین کنید.

درباره چیستی و چگونگی کار کردن آن میشود بیشتر حرف زدن ولی هدف این پست استفاده از آن در عمل در ری اکت است.

چگونگی به کارگیری REST API در ری اکت React

شما می توانید REST APIs (رست اِی پی آی ها) را در یک برنامه React به روش های مختلف به کار بگیرید، اما در این راهنما، من به دو مورد از محبوب ترین رویکردها خواهم پرداخت: Axios (یک کلاینت مبتنی بر HTTP = promise-based HTTP client) و Fetch API (اِی پی آی وب بومی مرورگر browser in-built web API ).

توجه: برای درک کامل این راهنما، باید با جاوا اسکریپت، ری اکت React , هوک های ری اکت آشنا باشید، زیرا آنها در مرکز این موضوع و آموزش هستند.

قبل از اینکه چگونگی به کارگیری API ها را بیان کنم، مهم است که بدانیم به کارگیری API در React با چگونگی انجام آن در جاوا اسکریپت بسیار متفاوت است. زیرا این درخواست ها اکنون در یک کامپوننت ری اکت React Component انجام می شود.

در اینجا، ما از کامپوننت های تابعی (فانکشنال) functional components استفاده خواهیم کرد، به این معنی که باید از دو هوک ری اکت React Hook اصلی استفاده کنیم:

• اول useEffect Hook: در React، ما درخواست های API را در داخل useEffectهوک انجام می دهیم. یا بلافاصله پس از نصب mount برنامه یا پس از رسیدن به یک state خاص، رندر می شود. این ساختار کلی است که ما استفاده خواهیم کرد:

useEffect(() => {
    // data fetching here : واکشی داده اینجا نوشته میشود
}, [ ]);

• دوم useState Hook: زمانی که ما داده را درخواست میکنیم، باید state را آماده کنیم تا در هنگام بازگشت داده ها در آن ذخیره شوند. من میتوانم آن را در یک ابزار مدیریت حالت state management مانند Redux یا در یک context object ذخیره کنم. اما برای ساده نگه داشتن کارها، داده های برگشتی را در state محلی ری اکت React local state ذخیره میکنم.

const [posts, setPosts] = useState([ ]);

اکنون بیایید به موضوع اصلی این راهنما بپردازیم، جایی که نحوه دریافت، افزودن و حذف داده ها را با استفاده از JSONPlaceholder posts API یاد خواهیم گرفت . این دانش برای هر نوع API قابل استفاده است، زیرا این راهنما برای مبتدیان در نظر گرفته شده است.

چگونگی به کارگیری API ها با استفاده از Fetch API

باید بدانید: Fetch API یک متد بومی جاوا اسکریپت برای بازیابی منابع از سرور یا نقطه پایانی API است. از آنجایی که بومی است، بنابراین نیازی به نصب هیچ گونه وابستگی یا بسته ای ندارید.

این متد fetch به یک آرگومان اجباری نیاز دارد که مسیر یا URL منبعی است که می‌خواهیم fetch کنیم. سپس یک Promise را برمی‌گرداند تا بتوانید با استفاده از متدهای thenو catchموفقیت یا شکست را مدیریت کنید.

یک درخواست fetch واکشی اولیه برای نوشتن بسیار ساده است و شبیه کد زیر است. ما به سادگی داده‌ها را از یک URL دریافت می‌کنیم که داده‌ها را به صورت JSON برمی‌گرداند و سپس آن را به کنسول وارد می‌کنیم:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10') /دریافت داده
   .then(response => response.json()) /برگرداندن به صورت جیسون
   .then(data => console.log(data)); /نمایش در کنسول

پاسخ پیش‌فرض معمولاً یک پاسخ HTTP معمولی است نه یک جیسون JSON واقعی، اما می‌توانیم خروجی خود را به عنوان یک ابجکت جیسون (JSON object) با استفاده از متد response.json دریافت کنیم.

چگونگی انجام یک درخواست GET در ری اکت با Fetch API

می توانید از روش HTTP GET برای درخواست داده از نقطه پایانی استفاده کنید.

همانطور که قبلا گفته شد، Fetch API یک آرگومان اجباری را می پذیرد که true است. همچنین یک آرگومان اختیاری را می پذیرد که الزامی در استفاده از آن نیست، به ویژه هنگام استفاده از متد GET، که پیش فرض است. اما برای متدهای دیگر چطور؟ برای متدهای دیگر مثل POST و DELETE، باید متد را به آرایه وصل کنید:

fetch(url, /لینک دریافت داده
{ 
   method: &quotGET&quot // پیشفرض، پس میتوانیم نادیده بگیریم
}
)

تا اینجا، روش کار را یاد گرفتیم، بنابراین بیایید همه چیزهایی را که یاد گرفته‌ایم کنار هم بگذاریم و یک درخواست دریافت (get request) برای واکشی داده‌ها (fetch data) از API خود انجام دهیم.

در اینجا ما بازهم از API آنلاین رایگان JSONPlaceholder برای واکشی fetch فهرستی از پست‌ها در اپلیکیشن خود استفاده خواهیم کرد :

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

const App = () => {
   const [posts, setPosts] = useState([ ]); 

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then( (response) => response.json( ) )
         .then((data) => { console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, [ ]);

return (
   // ... به کار گرفتن داده ها در اینجا اتفاق می افتد
);
};

اکنون در ادامه میخواهیم کد بالا را تکه تکه توضیح دهیم:

اول) ما یک state ایجاد کردیم تا داده‌هایی را که از API بازیابی می‌کنیم ذخیره کنیم تا بتوانیم آن‌ها را بعداً در برنامه خود به کار بگیریم. همچنین مقدار پیش فرض را روی یک آرایه خالی قرار می دهیم:

const [posts, setPosts] = useState([ ]);

سپس) عملیات اصلی در حالت useEffect رخ داد، به طوری که داده ها یا پست ها به محض بارگیری برنامه واکشی fetch می شوند. درخواست واکشی fetch یک promise برمیگرداند که می توانیم آن را بپذیریم یا رد کنیم:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then( (response) => console.log(response) );
}, 
[ ]
);

اکنون میخواهم تکه کد بالا را برای شما توضیح دهم:

این response دربردارنده مقدار زیادی داده است، مانند status code کد وضعیت، text متن و اطلاعات دیگری که بعداً برای رسیدگی به خطاها باید داشته باشیم.

>> تا اینجا، با then سر و کار داشتیم، اما آن یک ابجکت response برمیگرداند، که چیزی که ما میخواهیم نیست.

>> بنابراین باید آبجکت Response را با فرمت JSON با استفاده از متدjsonدریافت کنیم. این همچنین به ما یک promise برمیگرداند که داده های واقعی را با استفاده از thenدوم بدست آوریم:

useEffect(( ) => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json( ))
      .then((data) => {
         console.log(data);
         setPosts(data);
      });
}, [ ]);

اگر به کنسول نگاه کنیم، خواهیم دید که 10 پست را از API خود بازیابی کرده‌ایم که آن‌ها را نیز به state که قبلاً تعیین کرده‌ایم تنظیم کرده‌ایم.

این کامل نیست زیرا ما فقط با دریافت promise سر و کار داشتیم و نه رد promise، پس اکنون با استفاده از متد catch این را مدیریت میکنیم. در واقع اگر داده را مطابق خواسته، دریافت کنیم که آن را در setPost ذخیره میکنیم، اما اگر خطایی رخ دهد، این خطا در دریافت داده را با متد catch مدیریت میکنیم و آن را در کنسول نمایش میدهیم :

useEffect(( ) => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json( ))
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, [ ]);

بسیار خوب، تا اینجا کدی را که نوشتیم تکه تکه توضیح دادیم. اکنون میخواهم در ادامه قسمت پایانی که کد که پس از return به صورت کامنت نوشتم: // ... به کار گرفتن داده ها در اینجا اتفاق می افتد ، را بنویسم.

تا اینجا، چگونگی اجرای درخواست یک GETرا دیده ایم. این می تواند به راحتی با looping حلقه زدن در آرایه ما به کار گرفته شود.

const App = ( ) => {
// ... تا اینجا کدهای مورد نظرمان را نوشتیم 

   return (
   <div className=&quotposts-container&quot>
      {posts.map((post) => {
         return (
            <div className=&quotpost-card&quot key={post.id}>
               <h2 className=&quotpost-title&quot>{post.title}</h2>
               <p className=&quotpost-body&quot>{post.body}</p>
               <div className=&quotbutton&quot>
               <div className=&quotdelete-btn&quot>Delete</div>
               </div>
            </div>
         );
      })}
   </div>
   );
};

export default App;