از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
استفاده از fetch برای ارسال درخواست های HTTP در JavaScriptJavaScript Fetch API به ما امکان می دهد درخواست های HTTP ارسال کنیم. از زمانی که ECMAScript 2015 (که معمولاً با نام ES6 شناخته می شود) معرفی شد و از Promises استفاده می کند، بخشی استاندارد از جاوا اسکریپت بوده است. این مقاله ابتدا به شما نشان می دهد که چگونه درخواست ها با جاوا اسکریپت وانیلی قبل از توسعه Fetch API انجام شده است. ما سپس …
سرفصلهای مطلب
معرفی
Fetch API جاوا اسکریپت به ما امکان می دهد درخواست های HTTP ارسال کنیم. از آن زمان به عنوان بخشی استاندارد از جاوا اسکریپت تبدیل شده است ECMAScript 2015 (که معمولاً با نام ES6 شناخته می شود) معرفی شد و از Promises استفاده می کند.
این مقاله ابتدا به شما نشان می دهد که چگونه درخواست ها با جاوا اسکریپت وانیلی قبل از توسعه Fetch API انجام شده است. سپس شما را راهنمایی خواهیم کرد روی روش استفاده از Fetch API، برجسته کردن میزان پیشرفت آن نسبت به روش‌های دیگر.
برپایی
این مقاله به استفاده از Fetch API برای درخواست HTTP در مرورگر می‌پردازد. به این ترتیب، ما باید یک HTML راه اندازی کنیم page که مرورگر ما می تواند نمایش دهد. در فضای کاری خود، با ایجاد یک شروع کنید index.html فایل.
این index.html فایل در سراسر این مقاله استفاده خواهد شد. HTML page محتوای متنی ندارد، فقط برای بارگیری فایل های JS استفاده می شود تا بتوانیم درخواست ها و پاسخ ها را در مرورگر خود مشاهده کنیم. console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript HTTP Requests</title>
</head>
<body>
<script src="./xhr.js"></script>
</body>
</html>
ما تغییر می دهیم script همانطور که ما در حال کار بر روی موضوعات جدید هستیم، تگ کنید، اما بقیه HTML ثابت می ماند.
شما همچنین می خواهید مرورگر خود را داشته باشید console باز کنید تا بتوانیم نتایج درخواست های HTTP خود را ببینیم. این کار معمولا با کلیک راست انجام می شود روی وب page و “بازرسی” را انتخاب کنید. در کروم به این شکل است:
اکنون، اجازه دهید تب “کنسول” را انتخاب کنیم تا بتوانیم هر خروجی را که جاوا اسکریپت ما ثبت می کند، ببینیم:
شما آماده اید! بیایید ارسال درخواست های HTTP را با اولین روش ممکن با جاوا اسکریپت آغاز کنیم – XMLHttpRequest.
درخواست با XMLHttpRequest
قبل از اینکه Fetch API وجود داشته باشد، تمام درخواست های جاوا اسکریپت با یک انجام می شد XMLHttpRequest (یا XHR) هدف – شی. علی رغم نامش، این شیء می تواند داده ها را در هر قالبی از یک سرور بازیابی کند. این فقط به XML محدود نمی شود.
دست بگیریم روی با یک درخواست XHR در مرورگر ما. در همان پوشه شما index.html فایل جدید ایجاد کنید xhr.js فایل.
این فایل جاوا اسکریپت جدید یک شی XHR ایجاد می کند و یک را ارسال می کند GET درخواست به یک API JSON. سپس نتایج درخواست را در قسمت ثبت می کنیم console. در شما xhr.js فایل، موارد زیر را وارد کنید:
let xhr = new XMLHttpRequest();
xhr.open('get', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();
xhr.onload = function() {
console.log(xhr.response);
};
در خط اول، یک جدید ایجاد کردیم XMLHttpRequest هدف – شی. سپس از آن استفاده کردیم open() روشی برای ایجاد یک درخواست HTTP جدید. اولین استدلال از open() روش HTTP درخواست است – در این مورد، ما a را ارسال می کنیم GET درخواست. آرگومان دوم URL با منبع سرور مورد نظر ما است. سپس از send() روش ارسال درخواست
زمانی که یک XHR با موفقیت داده ها را از شبکه دریافت می کند، a را ارسال می کند بار رویداد. به process داده ها را پس از بارگیری، یک تابع را روی آن تنظیم می کنیم onload دارایی از XHR هدف – شی. در این مورد، ما به سادگی پاسخ به را ثبت می کنیم console.
اکنون، در توسعه دهنده شما console شما باید موارد زیر را ببینید
آفرین روی ایجاد یک درخواست API با XMLHttpRequest!
در حالی که قابل استفاده است، روش مدیریت داده های ناهمزمان با Promises سازمان یافته و استاندارد شده مورد استفاده در جاوا اسکریپت مدرن بسیار متفاوت است. ما می‌توانیم کدهای ساده‌تر را با Fetch API حفظ کنیم.
Fetch API
Fetch API یک API مبتنی بر وعده برای ایجاد درخواست‌های HTTP است، مشابه آنچه ما با استفاده از آن انجام دادیم XMLHttpRequest. بر خلاف XMLHttpRequest هنگام استفاده از Fetch API نیازی به ایجاد اشیاء جدید نداریم. مرورگرها با یک جهانی عرضه می شوند fetch() تابعی که می توانیم از آن برای درخواست استفاده کنیم.
بیایید ببینیم چگونه می توانیم از این API برای درخواست HTTP از طریق اینترنت استفاده کنیم.
ارسال درخواست با Fetch
Fetch API می تواند ایجاد کند GET، POST، PUT، PATCH، DELETE و انواع دیگر درخواست های HTTP. ما تمرکز می کنیم روی دو تا از متداول ترین روش های مورد استفاده در درخواست های HTTP: GET و POST.
دریافت درخواست ها
بیایید از Fetch API برای ایجاد a استفاده کنیم GET درخواست به https://jsonplaceholder.typicode.com/posts/1 مثل ما با XMLHttpRequest زودتر
در شما index.html فایل را تغییر دهید script تگ برای ارجاع به یک فایل جاوا اسکریپت جدید:
<script src="./fetchGet.js"></script>
حالا جدید را ایجاد کنید fetchGet.js فایل در همان فضای کاری ما یک را ارسال خواهیم کرد GET درخواست و ورود خروجی به console یک بار دیگر. کد زیر را وارد کنید fetchGet.js:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json));
در خط اول از global استفاده می کنیم fetch() تابع ارسال a GET درخواست به API ما. استدلال از fetch() URL با منبع سمت سرور است.
سپس قول را به زنجیر می زنیم then() روش، که پاسخ HTTP را در response استدلال و آن را فرا می خواند json() روش. این json() متد بدنه پاسخ را به یک شی JSON تجزیه می کند. با این حال، آن را به عنوان یک وعده برمی گرداند.
به همین دلیل استفاده می کنیم then() یک بار دیگر برای زنجیره‌ای کردن یک وعده دیگر، که JSON تجزیه‌شده را به حساب وارد می‌کند console.
بارگیری مجدد index.html در صورت نیاز، بنابراین می توانید خروجی زیر را ببینید:
توجه داشته باشید: خروجی با آنچه در زمان ساخت به دست آوردیم متفاوت به نظر می رسد GET درخواست با XMLHttpRequest. به این دلیل است XMLHttpRequest داده های پاسخ HTTP را به صورت رشته ای برمی گرداند، در حالی که ما داده ها را به یک شی JSON تجزیه کردیم. در حالی که فرمت های بازگشتی متفاوت هستند، محتوای آنها یکسان است.
بیایید ببینیم چگونه می توانیم استفاده کنیم fetch() برای ارسال داده در الف POST درخواست.
ارسال درخواست ها
ما می توانیم داده ها را با fetch() با افزودن یک شی جاوا اسکریپت به عنوان آرگومان دوم با اطلاعات مورد نیاز برای ارسال درخواست HTTP.
استفاده کنیم fetch() برای آپلود داده های JSON در یک POST درخواست یک API ساختگی در شما index.html فایل را تغییر دهید script تگ برای ارجاع به یک فایل جاوا اسکریپت جدید:
<script src="./fetchPost.js"></script>
حالا ایجاد کنید fetchPost.js در فضای کاری شما تا بتوانیم یک POST درخواست به API که یک مورد جدید را به عنوان یک شی JSON آپلود می کند. کد زیر را وارد کنید fetchPost.js:
const todo = {
title: 'Some really important work to finish'
};
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(json => {
console.log(json);
});
اولین کاری که انجام می دهیم ایجاد یک است todo شی، که حاوی داده‌هایی است که می‌خواهیم به API ارسال کنیم.
همانطور که با GET درخواست ها، ما استفاده می کنیم fetch() با ارائه یک URL از API که می خواهیم به آن دسترسی پیدا کنیم. با این حال، این بار یک شی به عنوان آرگومان دوم برای آن داریم fetch() با خواص زیر:
method: رشته ای که با متد HTTP برای استفاده در درخواست مشخص می کندbody: رشته ای با هر داده ای که می خواهیم در درخواست خود به سرور بدهیمheaders: یک شی که به ما امکان می دهد هر سرصفحه ای را که می خواهیم درخواست های HTTP ما شامل شود اضافه کنیم
همانطور که با GET درخواست، ما process پاسخ سرور را به عنوان JSON و آن را به توسعه دهنده وارد کنید console. بارگیری مجدد ما index.html باید موارد زیر را به ما نشان دهد console خروجی:
کار عالی با استفاده از fetch() برای آپلود داده ها از طریق POST درخواست!
حالا که یک دستگیره داریم روی با ایجاد درخواست‌های HTTP مختلف با Fetch API، بیایید ببینیم چگونه می‌توانیم پاسخ‌های مختلف HTTP را مدیریت کنیم.
پردازش پاسخ ها با Fetch
تا کنون ما داده‌های پاسخ را به JSON تجزیه کرده‌ایم. در حالی که این با API استفاده شده در مثال کار می کند، پاسخ های دیگر ممکن است انواع مختلفی از داده های غیر JSON را برگردانند.
یک شی پاسخ HTTP که پس از موفقیت بازگردانده می شود fetch() درخواست را می توان به فرمت های مختلف تجزیه کرد. علاوه بر json() روش، می توانیم از موارد زیر استفاده کنیم:
text(): پاسخ را به صورت داده رشته ای برمی گرداندblob(): پاسخ را به عنوان شی blob برمی‌گرداند (داده‌های باینری به همراه رمزگذاری آن)formData(): پاسخ را به عنوان برگردانیدFormDataشی (که جفت های کلید-مقدار داده های رشته ای را ذخیره می کند)arrayBuffer(): پاسخ را به عنوان برگردانیدArrayBuffer(نمایش سطح پایین داده های باینری)
مانند json() روش، این توابع یک وعده با محتوا برمی گردند. بنابراین، همه آنها باید با یک زنجیر شوند then() عملکرد تا محتوا قابل پردازش باشد.
از این توابع استفاده می شود process پاسخ های موفق HTTP که داده ها را برمی گرداند. بیایید اکنون نگاهی بیندازیم و چگونه می توانیم خطاها را با Fetch API مدیریت کنیم.
مدیریت خطاهای HTTP
مانند هر وعده دیگری، fetch() خطاها در catch() روشی که در انتهای یک زنجیره وعده قرار می گیرد. با این حال catch() تابع فقط اگر استفاده می شود fetch() نتوانست درخواستی ارسال کند این معمولاً به این معنی است که یک خطای شبکه وجود دارد.
اگر بخواهیم به آدرسی دسترسی پیدا کنیم که وجود ندارد و سرور یک 404 را برگرداند، در آدرس گیر نمی‌افتد. catch() روش، زیرا 404 یک وضعیت پاسخ HTTP معتبر است.
بنابراین، هنگام رسیدگی به خطاها با Fetch API باید دو کار انجام دهیم:
- شامل
catch()بند در انتهای زنجیره وعده برای برداشتن هرگونه خطای شبکه - کد وضعیت HTTP پاسخ را بررسی کنید تا ببینید موفقیت آمیز بوده است یا خیر.
بیایید مثال دیگری را انجام دهیم که در آن سعی می کنیم یک URL که وجود ندارد به دست آوریم.
با استفاده از ما GET مثال درخواست، ما می توانیم استفاده کنیم catch() مثل این:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.error(err));
با این حال catch() تابع فقط در صورتی استفاده می شود که fetch() درخواست ارسال نشد در شما index.html فایل، تگ اسکریپت را برای ارجاع به یک فایل جاوا اسکریپت جدید تغییر دهید:
<script src="./fetchError.js"></script>
اکنون در فضای کاری خود یک فضای جدید ایجاد کنید fetchError.js فایل. کد زیر را وارد کنید:
fetch("https://jsonplaceholder.typicode.com/notreal/")
.then(response => {
if (!response.ok) {
throw new Error("Could not reach website.");
}
return response.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));
ما با ارسال یک شروع می کنیم GET درخواست به یک URL غیر موجود روی آن API به تغییر اولی توجه کنید then() تابعی که بدنه پاسخ را به JSON تجزیه می کند:
if (!response.ok) {
throw new Error("Could not reach website.");
}
ما بررسی می کنیم ok خاصیت، که بولی است. این است true اگر کد وضعیت HTTP پاسخ بین 200-299 باشد. با استفاده از نه اپراتور (!)، می توانیم مواردی را که سرور یک خطای HTTP را برگردانده است، ضبط کنیم. اگر یک خطای HTTP دریافت کنیم، یک خطای سفارشی پرتاب می کنیم که به پایان می رسد fetch() زنجیره وعده
اگر خطای HTTP دریافت نکردیم، مانند قبل، پاسخ JSON را به عنوان یک وعده برمی‌گردانیم.
در انتهای زنجیره وعده، ما یک catch() تابع، که به سادگی خطا را ثبت می کند console.
اگر خود را دوباره بارگذاری کنید index.html page، شما باید این را ببینید console خروجی:
آفرین، شما اصول Fetch API را پوشش دادید.
نتیجه
Fetch API روشی مبتنی بر وعده برای ارسال درخواست های HTTP در جاوا اسکریپت ارائه می دهد. از آنجا که مبتنی بر وعده است، توسعه دهندگان آن را به عنوان جایگزینی تمیزتر می بینند XMLHttpRequest.
با fetch() عملکرد، ما می توانیم GET و POST درخواست ها به URL های مختلف ما می توانیم a را پیکربندی کنیم fetch() درخواست برای استفاده از هر روش HTTP که می خواهیم استفاده کنیم.
این fetch() تابع نیز ارائه می دهد response شی که می تواند به فرمت های مختلف تجزیه شود. اینها عبارتند از JSON، متن و بایت.
ما همچنین دیدیم که چگونه می توانیم هنگام درخواست با خطاها را مدیریت کنیم fetch(). جدای از قرار دادن catch() روش در انتهای زنجیره وعده برای دریافت خطاهای شبکه، همچنین باید کد وضعیت پاسخ HTTP را که قبل از تجزیه داده های آن دریافت کرده ایم بررسی کنیم.
Fetch API تماس های API خارجی را بدون استفاده از کتابخانه های خارجی قابل مدیریت می کند. قصد دارید با چه APIهایی دسترسی داشته باشید fetch()?
منتشر شده در 1403-01-21 23:37:04
