از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ارسال درخواست HTTP در React هنگام کار با API ها اغلب می خواهیم داده ها را برای پردازش به سرور ارسال کنیم. به عنوان مثال، اگر ما لیستی از کارهای انجام شده داریم و می خواهیم به آن اضافه کنیم، شاید از طریق ارسال فرم، از درخواست های POST HTTP برای ارسال یک درخواست با یک بار برای پردازش و … استفاده می کنیم.
سرفصلهای مطلب
معرفی
هنگام کار با API ها اغلب می خواهیم داده ها را برای پردازش به سرور ارسال کنیم. به عنوان مثال، اگر ما فهرستی از کارها را داریم و می‌خواهیم به آن اضافه کنیم، شاید از طریق ارسال فرم، از درخواست‌های POST HTTP برای ارسال یک درخواست با یک بار برای پردازش و ماندگاری احتمالی استفاده می‌کنیم.
در این مقاله، روش انجام درخواست‌های POST HTTP در React را با استفاده از دو رویکرد معمولی خواهیم آموخت: Fetch API و Axios. همچنین با روش انجام این کار در کامپوننت های کاربردی و کلاس محور آشنا خواهیم شد.
با استفاده از Fetch API، ارسال یک درخواست POST HTTP با React به آسانی:
// Using Fetch API
fetch('/myserver.endpoint', {
method: 'POST',
body: JSON.stringify({
// Add parameters here
})
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
console.log(data);
// Handle data
})
.catch((err) => {
console.log(err.message);
});
Axios یک جایگزین زیبا برای ارسال درخواست های HTTP POST در اختیار ما قرار می دهد:
// Using Axios - ensure you first install the package
axios.post('/myserver.endpoint', {
// Add parameters here
})
.then((response) => {
console.log(response.data);
// Handle 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.
توجه داشته باشید: همانطور که قبلا گفته شد، روش اجرا را یاد خواهیم گرفت POST درخواست با مؤلفه های تابعی با استفاده از متدهای Fetch API و Axios و سپس در مؤلفه های مبتنی بر کلاس با استفاده از JSON Placeholder رایگان پست های جعلی REST API.
به عنوان مثال، فهرستی از پست‌هایی را که قبلاً از یک 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('');
// ... Fetch posts here
// Handle post request
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 (
// ... JSX here
);
};
export default App;
در کد بالا، روشی ایجاد کردیم که به فرم پیوند می دهیم تا با کلیک روی دکمه ارسال فرم، راه اندازی شود. ما با استفاده از e.preventDefault() برای جلوگیری از page از بارگیری مجدد هنگام ارسال فرم، که است معمولا آنچه می خواهید اتفاق بیفتد، اما برای نسخه نمایشی ما به خوبی کار نمی کند:
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);
});
};
هشدار: به طور معمول ، شما ذخیره نمی کند و process داده ها روی قسمت جلویی مانند ما، اما از آنجایی که API ساختگی که ما با آن کار می کنیم، در واقع پست جدید را ذخیره و برمی گرداند – ما آن را به طور مصنوعی به لیستی اضافه می کنیم که از اولین درخواست GET برمی گردد. هنگامی که پست در پایگاه داده ذخیره می شود – ما می توانیم یک درخواست دیگر به back-end ارائه دهیم تا پاسخ را برای نمایش به کاربر ارائه دهیم. همچنین به همین دلیل است که رفتار پیش فرض ارسال فرم بارگذاری مجدد فرم است page – که باعث شروع اولیه می شود fetch() درخواست دریافت کنید و پست جدید را در کنار پست های قدیمی به صورت خودکار نمایش دهید.
روش انجام درخواست POST HTTP در کامپوننت عملکردی React با Axios
روش انجام درخواست‌های POST با Fetch API را در بخش قبل توضیح دادیم. حال ، بیایید اصلاح کنیم handleSubmit() روش و به جای آن درخواست های POST را با Axios انجام دهید.
Axios یک کتابخانه سرویس گیرنده HTTP است که از قول ها برای آسان کردن ارسال استفاده می کند درخواست های HTTP ناهمزمان برای استراحت به نقاط پایانی. چون یک کتابخانه خارجی است، ابتدا باید با اجرای دستور زیر در دایرکتوری پروژه خود آن را در پروژه خود نصب کنیم:
$ 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() hook:
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 (
// ... JSX here
);
}
}
export default App;
این بار، دیگر روش‌ها را با the اعلام نمی‌کنیم const کلمه کلیدی. در عوض، آنها را با پیشوند قرار دهید this. این روش زمانی فعال می شود که دکمه ارسال فرم کلیک شود. از آنجایی که یک فرم است، ما با استفاده از آن شروع کردیم e.preventDefault() برای جلوگیری از page از بارگیری مجدد هنگام ارسال فرم:
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.
روش انجام درخواست HTTP POST در کامپوننت کلاس 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 استفاده کنیم. ما همچنین دیدیم که چگونه می توان آنها را در هر دو مؤلفه عملکردی و مبتنی بر کلاس انجام داد، بنابراین این مقاله می تواند بدون توجه به آنچه در پروژه ما استفاده می شود در خدمت ما باشد.
منتشر شده در 1403-01-07 04:57:03
