از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
دریافت درخواست HTTP در React هنگام توسعه برنامه های کاربردی وب – ما به طور معمول به منابع میزبان دسترسی پیدا می کنیم روی یک سرور درخواست، ارسال یا انجام سایر عملیات روی منابع از طریق درخواست های HTTP انجام می شود. این درخواست ها از مشتری به a ارسال می شود host روی یک سرور هنگام درخواست HTTP ، مشتری از URL استفاده می کند (لباس …
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه های کاربردی وب – ما به طور معمول به منابع میزبانی شده دسترسی پیدا می کنیم روی یک سرور درخواست، ارسال یا انجام سایر عملیات روی منابع از طریق درخواست های HTTP انجام می شود. این درخواست ها از مشتری به a ارسال می شود host روی یک سرور هنگام درخواست HTTP، کلاینت از a استفاده می کند URL (یکسان منبع یاب) و یک payload که حاوی اطلاعات لازم برای دسترسی به منابع سرور است.
پنج روش رایج درخواست HTTP عبارتند از GET، PUT، POST، PATCH، و DELETE. این روش ها به ما اجازه می دهند تا عملیات استاندارد CRUD را انجام دهیم.
در این مقاله، روش ایجاد یک درخواست HTTP GET در React را با استفاده از Axios یا Fetch API و همچنین روش انجام این کار در مؤلفه‌های کلاسی و عملکردی را یاد خواهیم گرفت.
توجه داشته باشید: در این مقاله از JSON Placeholder رایگان پست های جعلی REST API برای انجام یک درخواست GET HTTP روی سرور خود را برای بازیابی برخی از منابع.
درخواست GET چیست؟
GET یک روش درخواست HTTP است که برای به دست آوردن منابع از سرورها استفاده می شود.
Axios و واکشی API دو روش اصلی برای درخواست HTTP هستند.
- API Fetch یک ماژول JavaScript مبتنی بر وعده داخلی برای بازیابی منابع از یک سرور یا یک نقطه پایانی API است.
- Axios یک کتابخانه سرویس گیرنده HTTP مبتنی بر وعده است که ارسال درخواست های HTTP ناهمزمان به نقاط پایانی REST را ساده می کند. این یک کتابخانه خارجی است که باید نصب شود.
در این مقاله به روش انجام درخواست‌های GET در مؤلفه‌های تابعی React با استفاده از متدهای Fetch API و Axios و سپس روش انجام همین کار در مؤلفه‌های مبتنی بر کلاس می‌پردازیم.
روش انجام درخواست HTTP در مؤلفه های عملکردی React
یک مؤلفه کاربردی ایجاد می شود که یک عملکرد JavaScript (یا عادی یا ES6) یک عنصر React (JSX) را برمی گرداند. ما هنگام کار با اجزای کاربردی ، از قلاب های React استفاده می کنیم که هنگام انجام درخواست های GET بسیار مهم هستند.
ما استفاده خواهیم کرد useState() و useEffect() قلاب ها از آنجا که useEffect() hook بلافاصله وقتی برنامه نصب می شود ، ما همیشه درخواست می کنیم در آن درخواست می کنیم و ما از آن استفاده می کنیم useState() hook برای ذخیره داده/پاسخ ما.
روش انجام درخواست HTTP در مؤلفه عملکردی React با API Fetch
این fetch() متد یک آرگومان اجباری را می پذیرد – URL منبعی که می خواهیم واکشی کنیم، و همچنین یک آرگومان اختیاری که روش درخواست را نشان می دهد. مقدار پیش فرض برای آن آرگومان اختیاری است 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 (
// ... consume here
);
};
این چیزی است که یک درخواست استاندارد GET به نظر می رسد. حال ، بیایید آنچه را که تاکنون انجام داده ایم تجزیه کنیم تا شما درک بهتری از کد فوق کسب کنید. اول از همه ، ما یک کشور ایجاد کردیم تا تمام منابع/پست هایی را که می خواهیم از آن استفاده کنیم posts API:
const (posts, setPosts) = useState(());
سپس از آن استفاده کردیم useEffect() hook و درخواست 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() hook و URL را که می توانیم برای دسترسی به سرور استفاده کنیم ، عبور داد. از آنجایی که این یک وعده را برمی گرداند، ما از آن استفاده کردیم 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() hook همانطور که برای 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() روش چرخه عمر برای انجام درخواست های HTTP در واکنش با اجزای کلاس.
روش انجام درخواست HTTP در اجزای کلاس React با API Fetch
این بسیار شبیه به روش اجرای ما است GET درخواست در اجزای عملکردی تنها تفاوت این است که ما اکنون از اموال دولتی در استفاده خواهیم کرد constructor() روش به جای useState() hook. همچنین، ما رسیدگی خواهد کرد GET درخواست در ComponentDidMount() چرخه زندگی به جای useEffect() hook، به طوری که این درخواست پس از نصب برنامه ما آغاز شود:
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 (
// ... use here
);
}
روش انجام درخواست HTTP در اجزای کلاس React با Axios
همانطور که با اجزای کاربردی دیدیم ، می توانیم ارسال کنیم GET درخواست با Axios. تنها چیزی که باقی می ماند اجرای آن است GET درخواست در داخل ComponentDidMount() چرخه زندگی و به import 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 انجام دهیم.
استفاده از یک روش خاص کاملاً به شما بستگی دارد.
منتشر شده در 1403-01-06 08:02:02
