fetch کردن API به ما امکان می‌دهد یک درخواست HTTP ایجاد کنیم تا بتوانیم به وسیله آن کارهایی در جاوا اسکریپت انجام دهیم. کارهایی مانند بازیابی دادهها از یک API، ارسال دادهها به سرور، یا حتی دریافت کل محتوای یک صفحه وب. این درخواست HTTP به صورت ناهمزمان دادهها را از URL ارائه شده بازیابی می‌کند و نوعی پاسخ HTTP ایجاد می‌کند. بیایید ببینیم این متد چگونه کار می‌کند.
تابع fetch() یک تابع جهانی است و بیشتر برای تعامل با APIها استفاده می‌شود. اگر در آن تازه کار هستید، تنها نیستید – پس بیایید نگاهی به نحوه عملکرد fetch() بیندازیم.
استفاده از fetch در جاوا اسکریپت
ابتدایی ترین استفاده از fetch کردن یک آرگومان دارد: یک URL که می‌خواهیمfetch کنیم. از آنجایی کهfetch کردن درخواست‌های HTTP ایجاد می‌کند، همیشه باید یک URL ارائه کنیم.
let fetchExample = fetch("https://fjolt.com").then((res) => {
// Do something with res
});
از آنجایی که نتیجه fetch کردن غیر همزمان (asynchronous) است، می‌توانیم از then() برای دریافت پاسخ استفاده کنیم و کاری با آن انجام دهیم. نکته جالب در مورد پاسخ یا پاسخ بازگشتی این است که یک دسته از متدهای built in دارد که به ما امکان می‌دهد بلافاصله محتوایی را که از fetch دریافت می کنیم تجزیه کنیم:
res.text() – محتوای متنی URL را برمی‌گرداند. اگر یک وب سایت باشد، HTML را برمی‌گرداند.
()res.json – داده های JSON فرمت شده را در صورت وجود برمی‌گرداند.
()res.blob – داده های blob را در صورت وجود برمی‌گرداند.
()res.arrayBuffer – داده های arrayBuffer را در صورت وجود برمی‌گرداند.
()res.formData – داده های formData را در صورت وجود برمی‌گرداند.
از آنجایی که URL های مختلف انواع مختلفی از محتوا را تولید می کنند، متدهای فوق این امکان را به ما می‌دهند که آن محتوا را به هر شکلی که دوست داریم تجزیه کنیم. برای درک اینکه چگونه همه این‌ها کار می‌کند، اجازه دهید به دو مثال بسیار رایج نگاه کنیم:
مثال 1: محتوای HTML یک وب سایت را با استفاده از fetch جاوا اسکریپت دریافت کنید.
همانطور که در بالا ذکر شد، res.text() محتوای متن یک URL را به ما می دهد – بنابراین ما می‌توانیم از آن برای دریافت کل محتوای HTML یک URL استفاده کنیم. هنگامی که پاسخ خود را با استفاده از res.text() دریافت کردیم، می توانیم پاسخ را با دیگری دریافت کنیم و به ما امکان می دهد محتوای URL ارائه شده را دانلود و برگردانیم:
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
return data;
});
// Now contains our website's HTML.
اگر لینک وجود نداشته باشد یا خطایی رخ دهد، object پاسخ ما ارور می‌دهد. به عنوان مثال، صفحه‌ای که یافت نشد، ارور 404 می‌دهد، یا خطای bad gateway، ارور 502 را برمی‌گرداند.
مثال 2: JSON را از طریق Javascript Fetch دریافت کنید.
اگر محتوای URL از JSON تشکیل شده باشد، می توانیم از res.json() استفاده کنیم. برای مثال، کد زیر یک object در JSON را از URL برمی گرداند، با این فرض که URL در حال ارسال JSON معتبر است:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
return data;
});
// Now contains a JSON object - assuming one exists
گزینه هایی برای fetch جاوا اسکریپت
همچنین درک گزینه های موجود در fetch کردن، بسیار مهم است. آنها بعد از URL، به عنوان یک object، یعنی fetch(URL, {options}) می‌آیند. اگر قبلاً با درخواست‌های HTTP کار کرده‌اید، ممکن است برخی آشنا باشند. تابع fetch که در زیر نمایش داده می شود شامل تمام گزینه های ممکنی است که می‌توانید استفاده کنید:
fetch("https://fjolt.com/", {
body: JSON.stringify({ someData: "value" })
method: 'POST'
mode: 'cors'
cache: 'no-cache'
credentials: 'same-origin'
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow'
referrerPolicy: 'no-referrer'
});
و در اینجا خلاصه ای‌از معنای هر یک از این موارد را بررسی می‌کنیم:
- body شامل بدنه (body) متن است. در این مثال، ما مقداری JSON ارسال می‌کنیم که باید stringified شود.
- متد یک روش استاندارد HTTP است. می تواند POST/GET/DELETE/PUT/CONNECT/PATCH/TRACE/OPTIONS باشد.
- mode به این اشاره دارد که درخواست‌های متقاطع پذیرفته شوند. می تواند cors/no-cors/همان منبع باشد.
- cache به نحوه تعامل مرورگر با کش اشاره دارد. می‌تواند default/no-cache/reload/force-cache/only-if-cached باشد.
- credentials به این موضوع اشاره دارد که اگر کوکی‌های متقاطع باید همراه با درخواست ارسال شوند، این می تواند include/same-origin/omit باشد.
- Headerها حاوی هر هدر مرتبطی با درخواست هستند. این می‌تواند حاوی هرheader HTTP باشد – به عنوان مثال، در اینجا Content-Type را نشان می دهد – اما می توانید هدرهای HTTP سفارشی نیز داشته باشید.
- redirect تعیین می کند که اگر URL fetch شده redirect شود چه اتفاقی می‌افتد. این می‌تواند follow/error/manual باشد.
- referrerPolicy تعیین می کند که چه مقداری از اطلاعات ارجاع‌دهنده با درخواست ارسال می شود. این می تواند no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url باشد.
به یاد داشته باشید، fetch جاوا اسکریپت asynchronous است
وقتی از fetch کردن استفاده می‌کنیم، به URL می رود، اطلاعات را جمع آوری می‌کند و به ما پاسخ می‌دهد. این فوری نیست، زیرا بارگیری URL، دانلود آن و بازگرداندن آن زمان می برد. اگر fetch را به تنهایی اجرا کنیم، یک console log بلافاصله پس از آن فقط یک Promise را برمی‌گرداند، نه پاسخ URL مورد نظر ما را:
let apiResponse = fetch("https://fjolt.com/api");
console.log(apiResponse); // Returns Promise<Pending>
این اتفاق می افتد زیرا تابع fetch() اجرا می‌شود، اما جاوا اسکریپت منتظر پاسخ نمی‌ماند. به این ترتیب، ما باید به صراحت به جاوا اسکریپت بگوییم که اگر می‌خواهیم به پاسخ دسترسی پیدا کنیم، منتظر آن بماند.
دو راه منتظر ماندن برای fetch():
- ما می توانیم از then استفاده کنیم و پاسخ fetch() خود را در then() دستکاری کنیم.
- می‌توانیم از await استفاده کنیم و قبل از استفاده از محتویات، منتظر بازگشت fetch باشیم.
استفاده از then
استفاده از then اغلب برای گرفتن و پردازش پاسخ‌ها از واکشی استفاده می‌شود. محتویات fetch() را می توان در تابع then() callback دستکاری کرد، اما نه خارج از آن. مانند مثال زیر:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
console.log(data);
// We can do anything with the data from our api here.
return data;
});
console.log(apiResponse); // This will return Promise<Pending>
// That means we can't use the apiResponse variable
// outside of the then() function.
اگر بخواهیم از محتویات fetch() خارج از then() استفاده کنیم، باید از await استفاده کنیم.
استفاده از await
راه دیگر منتظر ماندن برای fetch، استفاده از کلمه کلیدی await است. اکثر مرورگرهای مدرن از Top level awaits پشتیبانی می‌کنند، اما اگر نگران پشتیبانی یا استفاده از نسخه Node.JS قبل از 14.8 هستید، باید هر کد await را در یک تابع async قرار دهید.
اگر از await استفاده کنیم، می‌توانیم از پاسخ API خود در هر جایی از تابع یا کدمان بهره ببریم و از هر تابع پاسخی مانند text() یا json() روی آن استفاده کنیم. مثلا:
// Typically we wrap await in an async function
// But most modern browsers and Node.JS support
// await statements outside of async functions now.
async getAPI() {
let apiResponse = await fetch("https://fjolt.com/api");
let response = apiResponse.json();
// Since we waited for our API to respond using await
// The response variable will return the response from the API
// And not a promise.
console.log(response);
}
getAPI();
اگر می خواهید در مورد عملیات‌های async بیشتر بدانید، آموزش ما در مورد جاوا اسکریپت ناهمزمان را اینجا بخوانید.
نتیجه‌گیری
در این راهنما، نحوه عملکرد fetch را بررسی کردیم. ما گزینه‌های مختلفی را که می‌توانید با درخواست‌های fetch() ارسال کنید، و نحوه منتظر ماندن برای پاسخ با استفاده از مفاهیم asynchronous در جاوا اسکریپت را نشان دادیم. fetch() یک ابزار فوق العاده قدرتمند در جاوا اسکریپت است و همیشه در محصولات بزرگ استفاده می‌شود. امیدوارم از این مقاله لذت برده باشید.
منبع: hackernoon
Leave feedback about this