درخواست HTTP را در React دریافت کنید

معرفی

هنگام توسعه برنامه های کاربردی وب - ما به طور معمول به منابع میزبانی شده روی سرور دسترسی پیدا می کنیم. درخواست، ارسال یا انجام سایر عملیات روی منابع از طریق درخواست های HTTP انجام می شود. این درخواست ها از مشتری به یک هاست روی سرور ارسال می شود. هنگام درخواست HTTP، کلاینت از a استفاده می کند URL (یاب منبع یكنواخت) و یک payload که حاوی اطلاعات لازم برای دسترسی به منابع سرور است.

پنج روش رایج درخواست HTTP عبارتند از GET, PUT, POST, PATCHو DELETE. این روش ها به ما اجازه می دهند تا عملیات استاندارد CRUD را انجام دهیم.

در این مقاله، نحوه ایجاد یک درخواست HTTP GET در React را با استفاده از Axios یا Fetch API و همچنین نحوه انجام این کار در مؤلفه‌های کلاسی و عملکردی را یاد خواهیم گرفت.

درخواست GET چیست؟

GET یک روش درخواست HTTP است که برای به دست آوردن منابع از سرورها استفاده می شود.

Axios و واکشی API دو روش اصلی برای درخواست HTTP هستند.

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

در این مقاله، نحوه انجام درخواست‌های GET در مؤلفه‌های تابعی React با استفاده از متدهای Fetch API و Axios و سپس نحوه انجام همین کار در مؤلفه‌های مبتنی بر کلاس را بررسی خواهیم کرد.

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

وقتی یک تابع جاوا اسکریپت (عادی یا ES6) یک عنصر React (JSX) را برمی گرداند، یک مؤلفه تابعی ایجاد می شود. ما هنگام کار با کامپوننت های کاربردی از قلاب های React استفاده می کنیم که هنگام انجام درخواست های GET بسیار مهم هستند.

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

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

La fetch() متد یک آرگومان اجباری را می پذیرد - URL منبعی که می خواهیم واکشی کنیم، و همچنین یک آرگومان اختیاری که روش درخواست را نشان می دهد. مقدار پیش فرض برای آن آرگومان اختیاری است GET، بنابراین هنگام درخواست GET نیازی به تنظیم آن نیست.

سپس Fetch API a را برمی گرداند Promise، بنابراین ما می توانیم استفاده کنیم then() و catch() روش های مدیریت موفقیت یا شکست:

import { useState, useEffect } from 'react';

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

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

   return (
      
   );
};

این چیزی است که یک درخواست استاندارد GET به نظر می رسد. اکنون، بیایید آنچه را که تاکنون انجام داده‌ایم تجزیه کنیم تا درک بهتری از کد بالا به دست آورید. اول از همه، ما یک حالت ایجاد کردیم تا همه منابع/پست‌هایی را که از آن واکشی می‌کنیم نگهداری کنیم posts API ها:

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

سپس از آن استفاده کردیم useEffect() قلاب کنید و درخواست GET ما را در آن بنویسید تا درخواست بلافاصله پس از نصب برنامه فعال شود:

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

پس از آن، یک درخواست واکشی در آن ایجاد کردیم useEffect() قلاب و نشانی اینترنتی را که می‌توانیم برای دسترسی به سرور استفاده کنیم، ارسال کرد. از آنجایی که این یک وعده را برمی گرداند، ما از آن استفاده کردیم then() روش. از آنجایی که این روش به جای JSON یک شی پاسخ را برمی گرداند، ابتدا داده ها را به فرمت JSON تبدیل کردیم:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
}, []);

سپس به دریافت پست ها/داده ها ادامه دادیم و آنها را در حالتی که قبلا ایجاد کردیم ذخیره کردیم:

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

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

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

ما قبلاً یک درخواست GET انجام داده‌ایم و داده‌های خود را در حالتی که ایجاد کرده‌ایم ذخیره کرده‌ایم. اکنون می توانیم داده ها را در برنامه React خود مصرف کنیم.

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

به غیر از Fetch API، ما همچنین می توانیم از Axios برای ارسال درخواست های GET استفاده کنیم. Axios یک کتابخانه سرویس گیرنده HTTP مبتنی بر وعده است که ارسال درخواست های HTTP ناهمزمان به نقاط پایانی REST را ساده می کند.

اگر بخواهیم از Axios که یک کتابخانه خارجی است استفاده کنیم، ابتدا باید آن را در پروژه خود با اجرای دستور زیر در پوشه پروژه خود نصب کنیم:

$ npm install axios

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

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

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

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

   return (
      
   );
};

این بسیار تمیزتر از Fetch API به نظر می رسد! با نگاهی به کد بالا، ما با وارد کردن Axios شروع کردیم زیرا یک کتابخانه خارجی بود که ما نصب کردیم:

import axios from 'axios';

سپس درخواست GET را در داخل انجام دادیم useEffect() همانطور که برای Fetch API انجام دادیم، قلاب کنید، اما این بار نحو کمی متفاوت است:

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

برخلاف متد Fetch API، هیچ گزینه ای برای اعلام متد مورد نیاز نیست. ما به سادگی متد را به نمونه متصل می کنیم و آن را پرس و جو می کنیم، همچنین نیازی به تبدیل داده نیست زیرا آن را به صورت JSON برمی گرداند.

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

یک جزء کلاس یک کلاس ES6 است که JSX را برمی گرداند و برای استفاده از پسوندهای React نیاز دارد. قبل از معرفی قلاب ها، این متداول ترین روش مورد استفاده بود (یعنی نسخه های قبلی 16.8) زیرا حالت را نمی توان در اجزای عملکردی استفاده کرد.

با وجود در دسترس بودن قلاب ها، بسیاری از افراد همچنان از اجزای کلاس استفاده می کنند. بیایید ببینیم چگونه می توانیم از آن استفاده کنیم constructor() ویژگی حالت متد و ComponentDidMount() متد چرخه حیات برای انجام درخواست‌های GET HTTP در React با اجزای کلاس.

نحوه اجرای درخواست HTTP در اجزای کلاس React با Fetch API

این بسیار شبیه به نحوه اجرای ما است GET درخواست در اجزای عملکردی تنها تفاوت این است که ما اکنون از اموال دولتی در استفاده خواهیم کرد constructor() روش به جای useState() قلاب. همچنین، ما رسیدگی خواهد کرد GET درخواست در ComponentDidMount() چرخه زندگی به جای useEffect() قلاب، به طوری که این درخواست پس از نصب برنامه ما فعال شود:

import React, { Component } from 'react';

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

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         
      );
   }
}

در کد بالا، ما از روش سازنده برای مقداردهی اولیه وضعیت یک شی استفاده کردیم تا منبع/داده ای را که از سرور/API دریافت می کنیم ذخیره کنیم:

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

سپس درخواست GET خود را در قسمت انجام دادیم componentDidMount() روش چرخه عمر به طوری که پس از نصب برنامه فعال شود:

componentDidMount() {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
}

state یک شی است که حالت های زیادی را در خود نگه می دارد، ابتدا آن را تخریب می کنیم تا آن را بدست آوریم posts حالت، که بعداً می توان از آن استفاده کرد:

render() {
   const { posts } = this.state;

   return (
      
   );
}

نحوه اجرای درخواست HTTP در اجزای کلاس React با Axios

همانطور که با اجزای عملکردی دیدیم، می توانیم ارسال کنیم GET درخواست با Axios. تنها چیزی که باقی می ماند اجرای آن است GET درخواست در داخل ComponentDidMount() چرخه عمر و وارد کردن Axios:

import React, { Component } from 'react';
import axios from 'axios';

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

   componentDidMount() {
      axios
         .get('https://jsonplaceholder.typicode.com/posts')
         .then((response) => {
            this.setState({ posts: response.data });
         })
         .catch((error) => {
            console.log(error);
         });
   }

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

نتیجه

ما در این مقاله یاد گرفتیم که چگونه درخواست های GET HTTP را با اجزای عملکردی و کلاسی با استفاده از دو متد رایج - Fetch API و Axios انجام دهیم.

استفاده از یک روش خاص کاملاً به شما بستگی دارد.