ارسال درخواست HTTP در React

معرفی

هنگام کار با API ها اغلب می خواهیم داده ها را برای پردازش به سرور ارسال کنیم. به عنوان مثال، اگر ما فهرستی از کارها را داریم و می‌خواهیم به آن اضافه کنیم، شاید از طریق ارسال فرم، از درخواست‌های POST HTTP برای ارسال یک درخواست با یک بار برای پردازش و ماندگاری احتمالی استفاده می‌کنیم.

در این مقاله، نحوه انجام درخواست‌های POST HTTP در React را با استفاده از دو رویکرد معمولی خواهیم آموخت: Fetch API و Axios. همچنین با نحوه انجام این کار در کامپوننت های کاربردی و کلاس محور آشنا خواهیم شد.

با استفاده از Fetch API، ارسال یک درخواست POST HTTP با React به همین سادگی است:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios یک جایگزین زیبا برای ارسال درخواست های HTTP POST در اختیار ما قرار می دهد:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

اگر مایلید در مورد این رویکردها و نحوه عملکرد آنها بیشتر بدانید - لطفاً بقیه راهنما را بخوانید!

درخواست HTTP POST چیست؟

همانطور که از نام آن پیداست، درخواست‌های POST برای ارسال داده‌ها به یک نقطه پایانی استفاده می‌شوند – که معمولاً آن‌ها را پردازش کرده و در یک پایگاه داده ذخیره می‌کند. این داده‌ها می‌توانند از یک فرم گرفته شوند، در یک شی ذخیره شوند، یا به روش دیگری به دست آیند – اما معمولاً برای مصرف REST API به یک نمایش JSON تبدیل می‌شوند.

ارسال درخواست های HTTP با هر فعل توسط واکشی API (توکار) و کتابخانه هایی مانند Axios. Fetch API یک روش مرورگر داخلی برای انجام درخواست های HTTP است، در حالی که Axios یک بسته خارجی است که باید قبل از استفاده در پروژه خود نصب کنیم.

انتخاب بین اینها به شما بستگی دارد. Fetch API مفصل‌تر است و با درخواست‌های ناهمزمان کار نمی‌کند، اما Axios یک وابستگی خارجی است. با این حال - بسیاری ترجیح می دهند با Axios به جای Fetch API کار کنند. ما هر دو را پوشش می دهیم.

هر دو روش دارای مزایا و معایبی هستند، اما توجه به این نکته مهم است که آنها می توانند افعال استاندارد HTTP را مدیریت کنند. POST, GET, PUT, PATCH, DELETE.

به عنوان مثال، فهرستی از پست‌هایی را که قبلاً از یک API ساختگی واکشی کرده‌ایم کار می‌کنیم. ما فرمی ایجاد می کنیم که عنوان و متن یک پست جدید را می گیرد و پس از ارسال، درخواست POST را برای پردازش به سرور ساختگی ارسال می کند:

import { useState, useEffect } from 'react';

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

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

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

بیایید اکنون فرم را کاربردی کنیم تا بتوانیم پس از ارسال فرم، داده ها را به لیست پست های وب سایت خود اضافه کنیم.

نحوه انجام درخواست POST HTTP در کامپوننت عملکردی React

به لطف معرفی هوک ها در React، اکنون می توانیم درخواست های HTTP را در اجزای عملکردی انجام دهیم. پیش از این، کامپوننت های کاربردی فقط برای رندر UI استفاده می شد.

هنگامی که یک تابع جاوا اسکریپت (چه استاندارد یا ES6) یک عنصر React (JSX) را برمی گرداند، یک جزء تابعی ایجاد می شود.

به جای استفاده از شی state در متد سازنده مانند کامپوننت های مبتنی بر کلاس، اکنون از قلاب های React مانند useState() تا داده های خود را قبل از انتقال به داده های اصلی ذخیره کنیم.

نحوه انجام درخواست POST HTTP در کامپوننت عملکردی React با Fetch API

زیرا Fetch API یک روش مرورگر داخلی است که a را برمی گرداند Promise، ما از .then() و .catch() روش های مدیریت موفقیت و شکست همچنین یک آرگومان اجباری را می‌پذیرد، که URL منبع/API است که می‌خواهیم داده‌ها را در آن پست کنیم، و همچنین آرگومانی که درخواست HTTP را نشان می‌دهد، که در مورد ما چنین است. POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

در کد بالا، روشی ایجاد کردیم که به فرم پیوند می دهیم تا با کلیک روی دکمه ارسال فرم، راه اندازی شود. ما با استفاده شروع کردیم e.preventDefault() برای جلوگیری از بارگیری مجدد صفحه هنگام ارسال فرم، که این است معمولا آنچه می خواهید اتفاق بیفتد، اما برای نسخه نمایشی ما به خوبی کار نمی کند:

const handleSubmit = (e) => {
   e.preventDefault();
};

نگاهی به fetch() فراخوانی کنید، URL را به عنوان اولین پارامتر اجباری اضافه کردیم، و پارامتر دوم در روش درخواست (POST)، body، و header:

• body – حاوی داده‌هایی است که می‌خواهیم به نقطه پایانی API ارسال کنیم، که باید رشته کردن، آن را به یک نمایش JSON مبتنی بر متن تبدیل می کند.
• header – نوع محتوا را مشخص می کند که در مورد ما چنین است application/json، از آنجایی که بار ما به عنوان یک رشته JSON نشان داده می شود:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

در نهایت چون این متد a را برمی گرداند Promise، محتویات JSON را از آن استخراج می کنیم (پاسخ سرور)، به روز رسانی شده است posts وضعیت شامل داده های جدید.

برای رسیدگی به خطاها نیز از آن استفاده کردیم .catch() روش:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

نحوه انجام درخواست POST HTTP در کامپوننت عملکردی React با Axios

نحوه انجام درخواست‌های POST با Fetch API را در بخش قبل توضیح دادیم. حالا بیایید آن را اصلاح کنیم handleSubmit() روش و به جای آن درخواست های POST را با Axios انجام دهید.

Axios یک کتابخانه سرویس گیرنده HTTP است که از قول ها برای آسان کردن ارسال استفاده می کند درخواست های HTTP ناهمزمان به نقاط پایانی REST. چون یک کتابخانه خارجی است، ابتدا باید با اجرای دستور زیر در دایرکتوری پروژه خود آن را در پروژه خود نصب کنیم:

$ npm install axios

هنگامی که Axios را با موفقیت نصب کردیم، می‌توانیم درخواست POST خود را انجام دهیم:

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

با نگاهی به کد بالا، بسیار ساده‌تر است و به نحو کمتری نسبت به Fetch API نیاز دارد، زیرا دیگر نیازی به تبدیل به JSON، کار با هدرها و حتی محدود کردن داده‌های خود نداریم. این دیگ بخار توسط Axios انتزاع شده است.

نحوه انجام درخواست POST HTTP در کامپوننت کلاس React

درخواست‌های POST در مؤلفه‌های کلاس متفاوت از مؤلفه‌های عملکردی مدیریت می‌شوند، زیرا ما دیگر از قلاب‌های React استفاده نمی‌کنیم و در عوض از state هدف - شی.

یک جزء کلاس یک کلاس ES6 است که JSX را برمی گرداند و به پسوندهای React نیاز دارد.

نحوه انجام درخواست HTTP POST در کامپوننت کلاس React با Fetch API

درخواست بسیار شبیه به اجزای عملکردی است. تنها مناطقی که می‌توانیم تفاوت‌هایی پیدا کنیم، هنگام ذخیره داده‌ها است state و هنگام استفاده state مقادیر چون ما دیگر از آن استفاده نمی کنیم useState() قلاب:

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

این بار، دیگر روش‌ها را با the اعلام نمی‌کنیم const کلمه کلیدی. در عوض، آنها را با پیشوند قرار دهید this. این روش زمانی فعال می شود که دکمه ارسال فرم کلیک شود. از آنجایی که یک فرم است، ما با استفاده از آن شروع کردیم e.preventDefault() برای جلوگیری از بارگیری مجدد صفحه هنگام ارسال فرم:

handleSubmit = (e) => {
   e.preventDefault();
};

همانطور که قبلاً یاد گرفتیم، Fetch API دو پارامتر دارد. یکی URL است، در حالی که دومی حاوی گزینه هایی مانند روش درخواست (POST), body، که اطلاعاتی است که ما پست می کنیم (باید رشته ای باشد)، و سپس headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

با دانستن اینکه این یک وعده است، اکنون می توانیم آن را ضمیمه کنیم .then() روش مدیریت موفقیت و .catch() روشی برای رسیدگی به یک موقعیت در صورت وجود خطا یا شکست در درخواست HTTP.

نحوه انجام درخواست POST HTTP در کامپوننت کلاس React با Axios

ما نحوه اجرا را دیده ایم POST درخواست های HTTP در مؤلفه های مبتنی بر کلاس. این بسیار شبیه به Axios است، زیرا تنها کاری که باید انجام دهیم این است که Axios را نصب کرده و سپس آن را جایگزین کنیم handleSubmit() روش، بنابراین ما اکنون از Axios به جای Fetch API استفاده می کنیم:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

نتیجه

در این راهنما، ما یاد گرفتیم که چگونه از دو روش اصلی در React برای انجام درخواست های POST HTTP استفاده کنیم. ما همچنین دیدیم که چگونه می توان آنها را در هر دو مؤلفه عملکردی و مبتنی بر کلاس انجام داد، بنابراین این مقاله بدون توجه به آنچه در پروژه ما استفاده می شود می تواند به ما کمک کند.