ارسال درخواستهای post در react چگونه انجام می شود؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
برای ارسال درخواست از تابع fetch استفاده می کنیم.در این تابع باید آدرس مقصد را تعیین کنیم.
useEffect(() => {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'React Hooks POST Request Example' })
};
fetch('https://test.com/posts', requestOptions)
.then(response => response.json())
.then(data => setPostId(data.id));
}, []);
id مربوط به response را در postId
قرار می دهیم و در متد render می توانیم آن را نمایش دهیم.
[] به این معناست که درخواست فقط یکبار اجرا می شود و درصورتیکه به خطا خورد مجددا اجرا نمی شود.
همچنین می توانیم از توابع async
و await
استفاده کنیم
async componentDidMount() {
// POST request using fetch with async/await
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'React POST Request Example' })
};
const response = await fetch('https://test.com/posts', requestOptions);
const data = await response.json();
this.setState({ postId: data.id });
}
در آخر می توانیم بررسی کنیم که آیا در خواست با موفقیت انجام شد یا خیر:
componentDidMount() {
// POST request using fetch with error handling
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'React POST Request Example' })
};
fetch('https://test.com/invalid-url', requestOptions)
.then(async response => {
const data = await response.json();
if (!response.ok) {
const error = (data && data.message) || response.status;
return Promise.reject(error);
}
this.setState({ postId: data.id })
})
.catch(error => {
this.setState({ errorMessage: error.toString() });
console.error('There was an error!', error);
});
}
- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید