Fetch API (Web Fetch API)
«فچ (Fetch API)» راه ساده درخواست HTTP است. یعنی از سرور چیز بگیریم یا بفرستیم. مثل پیام دادن به سرور بازی، اما با قوانین وب.
مثال ساده Fetch
در این نمونه، یک فایل را می خوانیم و متنش را نشان می دهیم.
fetch(file)
.then(function(x) { return x.text(); })
.then(function(y) { myDisplay(y); });
نسخه async/await خواناتر
با «انتظار (await)»، کد شبیه دستورهای پشت سرهم می شود.
async function getText(file) {
let response = await fetch(file);
let text = await response.text();
myDisplay(text);
}
نام های واضح بهترند
نام خوب، فهم کد را راحت می کند. مثل برچسب روی دفتر.
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
myDisplay(myText);
}
نکته: fetch() یک ویژگی ES6 است. مرورگرهای مدرن از سال 2017 پشتیبانی کامل دارند.
برای ذخیره داده محلی، به Web Storage API سر بزن. برای کارهای پس زمینه، Web Worker API مفید است. همچنین برای ناوبری تاریخچه، History API را ببین. صفحه Fetch API مرجع همین موضوع است.
گام های عملی
- یک URL یا فایل تعیین کن.
- با
fetch(url)درخواست بفرست. - پاسخ را به متن یا JSON تبدیل کن.
- نتیجه را در صفحه نمایش بده.
جمع بندی سریع
fetch()جایگزین ساده XHR است.- با
thenیاawaitکار می کند. - پاسخ را به متن یا JSON تبدیل کن.
- نام های واضح، خوانایی را بالا می برند.