درخواست Ajax در ری اکت || واکشی داده ها

درخواست Ajax در ری اکت || واکشی داده ها

یکی از اولین سوالاتی که توسعه دهندگان جدید React دارند این است که “چگونه درخواست های AJAX را در ری اکت انجام دهم؟” یا “چگونه می توانم تماس های API را در React برقرار کنم؟”

در اینجا پاسخی برای این سوال وجود دارد.

اول: خود React به هیچ روش خاصی برای واکشی داده ها وفاداری ندارد. در واقع، تا آنجا که به React مربوط می شود، حتی نمی داند که یک “سرور” در تصویر وجود دارد.

React به سادگی کامپوننت ها را با استفاده از داده های تنها از دو مکان ارائه می کند: props و state.

بنابراین، برای استفاده از برخی داده‌ها از سرور، باید آن داده‌ها را در قسمت‌ها یا وضعیت اجزای خود قرار دهید.

شما می‌توانید این فرآیند را با خدمات و مدل‌های داده (به عنوان مثال، «تجریدات بسازید») تا جایی که می‌خواهید پیچیده کنید، اما در نهایت این فقط اجزایی هستند که props و state را ارائه می‌کنند.

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

انتخاب کتابخانه ی HTTP

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

شما میتوانید از axios, fetch  و یا superagent استفاده کنید. مسئله این است که واقعاً مهم نیست کدام یک را انتخاب کنید چرا که هیچ بهترینی وجود ندارد.

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

من axios را دوست دارم و فکر می کنم React و Axios به خوبی با هم جفت می شوند، بنابراین این چیزی است که در اینجا نشان خواهم داد. اما به طور جدی، اگر به دلایلی آن را دوست ندارید، به یکی از گزینه های دیگر نگاه کنید.

واکشی داده ها با axios در ری اکتپ

در اینجا مثالی ساده از یک کامپوننت را قرار دادیم که پست‌ها را از یک subreddit (در این مورد/r/reactjs) واکشی می‌کند. نگاهی به آن بیندازید، و در ادامه به نحوه عملکرد آن خواهیم پرداخت:

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class FetchDemo extends React.Component {
state = {
posts: []
}

componentDidMount() {
axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ posts });
});
}

render() {
return (
<div>
<h1>{`/r/${this.props.subreddit}`}</h1>
<ul>
{this.state.posts.map(post =>
<li key={post.id}>{post.title}</li>
)}
</ul>
</div>
);
}
}

ReactDOM.render(
<FetchDemo subreddit="reactjs"/>,
document.getElementById('root')
);

شیوه ی عملکرد

ابتدا کتابخانه axios را ایمپورت می کنیم:

import axios from 'axios';

ما حالت(state) را در بخش بالا با استفاده از ویژگی کلاس مقدار دهی اولیه می کنیم. شما همچنین می توانید این را با استفاده از کانستراکتور بنویسید، و آنها از نظر عملکردی معادل هستند. من ویژگی کلاس را دوست دارم زیرا کد کمتری برای نوشتن دارد.

componentDidMount جایی است که جادو اتفاق می افتد. این روش زمانی اجرا می شود که کامپوننت برای اولین بار “mount” شود (به DOM اضافه شود). این روش فقط یک بار در طول عمر کامپوننت اجرا می شود.

از تابع axios.get برای واکشی داده‌ها از subreddit استفاده می‌کنیم، بر اساس subreddit prop ارسال شده در حین رندر در پایین. بک‌تیک‌ها یک رشته الگوی ES6 هستند و احتمالاً همان کاری را انجام می‌دهد که شما فکر می‌کنید: قسمت ${…} با مقدار آن عبارت جایگزین می‌شود، بنابراین URL ارسال شده به axios.get در واقع http://www.reddit است. .com/r/reactjs.json.

دو نکته در اینجا قابل ذکر است، مخصوص Reddit:

• شما می‌توانید json. را تا انتهای هر URL subreddit علامت بزنید و یک نمایش JSON از پست‌ها در آنجا دریافت کنید.
• اگر www را فراموش کنید، یک خطای CORS دریافت خواهید کرد (حداقل، من این کار را کردم).

از آنجایی که Axios از وعده‌ها استفاده می‌کند، ما تماس را با .then زنجیر می‌کنیم تا پاسخ را مدیریت کنیم.

وضعیت مؤلفه با فراخوانی this.setState با آرایه جدید پست ها به روز می شود. این یک رندر مجدد را آغاز می کند و سپس پست ها قابل مشاهده هستند.

و بالاخره کار ما به پایان رسید!

در این مقاله به آموزش درخواست Ajax در ری اکت و واکشی داده ها پرداختیم. موفق باشید!