تابع fetch در JavaScript

مقدمه

سابق بر این عادت کرده بودیم برای ارتباط با سرور از AJAX و XMLHttpRequest استفاده کنیم. این روش در زمان خودش انقلاب بزرگی بود. مرورگر های مدرن امروزی راهکار راحت تری هم برای ارتباط با سرور ارائه میدن. این راهکار که fetch API نام داره با استفاده از تابع fetch و از طریق HTTP با سرور ارتباط برقرار می کنه. این طوری می تونیم HTTP Verb هایی مثل GET, POST, DELETE و ... رو صرف کنیم.

درخواست GET

بذار مستقیم بریم سر کد! با استفاده از fetch می تونیم این طوری اطلاعات رو از یک آدرس GET کنیم:

const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/cool';
fetch(url).then(response => {
    return response.json();
}).then(response => {
    console.log(response);
});

از اون جایی که fetch یک Promise بر می گردونه (واسه مطالعه بیشتر در مورد promise ها این مقاله رو بخون) از متد های then استفاده میکنیم تا وقتی که Promise مون به وضعیت fulfilled رسید response اومده از سمت سرور رو parse کنه (هر چند اسم متد json هست ولی در عمل برعکس کار میکنه) و مجددا پاس بده به then بعدی. همین کد رو میشد این طوری نوشت :

let url = 'https://api.dictionaryapi.dev/api/v2/entries/en/cool';
const response = await fetch(url);
object = await response.json();
console.log(object);

درخواست POST

واسه درخواست هایی مثل POST و یا DELETE و امثالهم باید یک پارامتر دومی هم به تابع fetch بدیم که یک object هست متشکل از مخلفات request مثل headers و body و امثالهم. به کد زیر دقت کن:

const url = "https://reqres.in/api/users"
fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'bizhan hejazi',
        moveis: ["I Love You Man", "Role Models"]
    })
})
.then(response => response.json())
.then(object => console.log(object))

در کد بالا قسمتی که bold شده همون object ای هست که به عنوان پارامتر دوم به تابع fetch میدیم. این object جزئیات درخواست به صورت مفصله. حتما دقت کن که body این object رو تبدیل به JSON کردیم. اگه این کارو نکنیم درست عمل نمیکنه. مجددا همین کد بالا رو می شد این طوری هم نوشت:

const url = "https://reqres.in/api/users"
const response = await fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'bizhan hejazi',         
        moveis: ["I Love You Man", "Role Models"]
    })
});
const object = await response.json();
console.log(object);

نتیجه گیری

متد fetch در نهایت ساده بودن می تونه بسیار کار راه انداز باشه. کتاب خونه هایی مثل Axios هم هستن که کم و بیش مشابه همین fetch کار میکنن ولی استفاده از این کتاب خونه ها تو پروژه های بزرگ اهمیت پیدا میکنه. به object دوم تابع fetch که جزئیات request رو در بر داره میشه خیلی key:value های دیگه هم داد که تو این مقاله توضیح ندادم (واسه مطالعه بیشتر می تونی به این لینک سر بزنی). در نهایت یادت باشه که fetch توسط مرورگر های مدرن پشتیبانی میشه (یعنی IE بدون شک ازش پشتیبانی نمیکنه).