پاسخ داده شد
0
0

ارسال درخواستهای post  در react  چگونه  انجام  می  شود؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

برای ارسال درخواست از تابع 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);
        });
}
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت