از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در توسعه وب، اغلب برای ارسال یا دریافت داده ها نیاز به ارتباط با سرورها داریم. این معمولاً از طریق درخواست های HTTP انجام می شود و یکی از رایج ترین انواع درخواست ها درخواست POST است. در این بایت، روش استفاده از Fetch API برای ارسال درخواست‌های POST با داده‌های JSON از برنامه‌های جاوا اسکریپت را بررسی می‌کنیم.
Fetch API
Fetch API یک API مدرن و مبتنی بر وعده است که انجام درخواست‌های HTTP ناهمزمان از مرورگر یا Node.js را آسان می‌کند. این در اکثر مرورگرهای مدرن تعبیه شده است و جایگزین XMLHttpRequest مبتنی بر تماس قدیمی تر می شود.
در اینجا یک مثال اساسی از روش استفاده از Fetch API برای ارسال درخواست GET آورده شده است:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
را fetch() فراخوانی یک Promise را برمی‌گرداند که حل می‌شود Response شی که نشان دهنده پاسخ به درخواست است. را response.json() متد همچنین یک Promise را برمی گرداند که با تجزیه متن متن به صورت JSON حل می شود.
روش ارسال داده های JSON با Fetch API
برای ارسال درخواست POST با داده های JSON با استفاده از Fetch، باید یک را ارسال کنیم options شی به عنوان آرگومان دوم به fetch(). این شی شامل ویژگی هایی مانند method، headers، و body.
در اینجا روش انجام این کار آمده است:
const url = 'https://api.example.com/data';
const data = { username: 'example' };
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => {
console.error('Error:', error);
});
با استفاده از این کد، یک درخواست POST به URL مشخص شده با بدنه JSON ارسال می کنیم. را JSON.stringify() متد برای تبدیل یک شی یا مقدار جاوا اسکریپت به رشته JSON استفاده می شود.
مدیریت خطاها در Fetch API
نکته ای که در مورد Fetch API باید به آن توجه کرد این است که وضعیت خطای Promise on HTTP را رد نمی کند، حتی اگر پاسخ HTTP 404 یا 500 باشد. در عوض، فقط در صورت شکست شبکه یا اگر چیزی مانع از تکمیل درخواست شود، رد می شود. .
من شخصاً این سبک را ترجیح می دهم زیرا کار با آن آسان تر از مدیریت این خطاها در یک است catch روش. به عنوان مثال، زمانی که درخواستی با خطا مواجه نشود، انجام مجدد درخواستی که HTTP 500 را برمی گرداند، آسان تر است. همچنین به ما کنترل بیشتری بر روش برخورد با خطاها می دهد.
برای رسیدگی واقعی به خطاهای HTTP، باید بررسی کنیم که آیا response.ok اموال است true، که نشان دهنده موفقیت آمیز بودن پاسخ است (وضعیت در محدوده 200-299 است). اگر response.ok است false، می‌توانیم خطا را انتخاب کنیم یا همانجا آن را مدیریت کنیم.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('HTTP error ' + response.status);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
اگر کد وضعیت HTTP در محدوده 200-299 نباشد، خطایی ایجاد می‌شود و بلوک catch می‌تواند آن را مدیریت کند.
مقایسه Fetch با Axios
اگر به استفاده از کتابخانه دیگری عادت دارید، ممکن است تعجب کنید که Fetch چگونه با سایر کلاینت های HTTP محبوب مقایسه می شود. Axios. از Fetch و Axios می توان برای ارسال درخواست های HTTP از جاوا اسکریپت استفاده کرد، اما چند تفاوت اساسی بین این دو وجود دارد.
Fetch اکنون در اکثر مرورگرهای مدرن تعبیه شده است، به این معنی که می توانید بدون نصب هیچ کتابخانه اضافی از آن استفاده کنید. Promises را به صورت بومی برمی گرداند و به طور کلی استفاده از آن ساده تر و ساده تر است. با این حال، یک نقطه ضعف این است که از لغو درخواست پشتیبانی نمی‌کند، و مدیریت خطا آنطور که بسیاری از توسعه‌دهندگان انتظار دارند کار نمی‌کند، زیرا فقط یک Promise در مورد خرابی شبکه را رد می‌کند، نه در مورد وضعیت خطای HTTP.
از طرف دیگر، Axios باید به عنوان یک کتابخانه جداگانه نصب شود، اما طیف وسیع تری از ویژگی ها را ارائه می دهد. از لغو درخواست، تبدیل خودکار داده‌های JSON پشتیبانی می‌کند و راهی برای تنظیم زمان پاسخ ارائه می‌کند. همچنین وضعیت خطای Promise on HTTP را رد می کند، که ممکن است آن را به روش Fetch برای انجام آن ترجیح دهید.
نتیجه
در این بایت کوتاه، روش استفاده از Fetch API برای ارسال داده های JSON را یاد گرفتیم و Fetch را با Axios مقایسه کردیم. Fetch یک ابزار قدرتمند ساخته شده در مرورگرهای مدرن است که به ما امکان می دهد درخواست های HTTP را مستقیماً از جاوا اسکریپت ارسال کنیم. اگرچه ممکن است برخی از ویژگی های پیشرفته Axios را نداشته باشد، اما راه حلی راحت و ساده برای بسیاری از موارد استفاده است.
منتشر شده در 1402-12-28 12:28:05
