یکی از ویژگی‌های مهم جاوا اسکریپت ایجاد درخواست از API-های گوناگون است که این API-ها می‌توانند کاربردهای بسیار جذابی در پروژه‌های مختلف داشته باشند. Fetch در جاوا اسکریپت متدی است که برای این هدف به کار می‌رود. قبلاً در جاوا اسکریپت از روش XMLHttpRequest برای ایجاد درخواست‌های API استفاده می‌شد. این روش درخواست از API شامل Promise نبود و کد آن بسیار پیچیده و ناخوانا بود.

هم‌اکنون، جاوا اسکریپت راه‌حل بسیار مناسبی برای ایجاد درخواست از API ارائه می‌دهد که این راه‌حل، Fetch API نام دارد. Fetch API استاندارد جدیدی برای درخواست سرور با Promise است. البته روش‌های ایجاد درخواست در جاوا اسکریپت به این دو مورد محدود نمی‌شوند. در این مطلب آموزشی از مجله تم آف، متد Fetch در جاوا اسکریپت، برای درخواست از API به همراه جنبه‌های مختلف آن موردبررسی قرار خواهد گرفت.

متد Fetch در جاوا اسکریپت چیست؟

متد Fetch در جاوا اسکریپت برای درخواست از سرور و بارگذاری اطلاعات در صفحات وب استفاده می‌شود. درخواست می‌تواند از هر API باشد که در آن داده‌های فرمت JSON یا XML را برمی‌گرداند. متد fetch یک «وعده» (Promise) را برمی‌گرداند. «سینتکس» (Syntax) یا دستور متد Fetch در جاوا اسکریپت به‌ صورت زیر است:

fetch('url')//api for the get request

  .then(response => response.json())

  .then(data => console.log(data));

متد Fetch در جاوا اسکریپت چه‌ پارامترهایی می‌گیرد؟

متد fetch دو پارامتر URL و Options را می‌پذیرد. شرح این دو پارامتر به‌صورت زیر است:

• URL: آدرسی است که درخواست به آن ارسال می‌شود.
• Options: آرایه‌ای از خواص است. این پارامتری اختیاری است.

داده‌های بازگردانده شده در متد fetch می‌توانند از فرمت JSON یا XML باشند. همچنین داده‌های بازگردانده شده می‌توانند آرایه‌ای از اشیا، یا حتی یک شی واحد باشند. باید به این نکته توجه داشت که به طور پیش‌فرض، متد fetch در Javascript  «هیچ کوکی» (Cookie) را از سرور ارسال یا دریافت نمی‌کند و در نتیجه درخواست‌های آن احراز هویت نمی‌شوند.

promise در درخواست Fetch API چیست؟

قبل از اینکه اصل مسئله بیان شود، بهتر است که در مورد promise و رسالت آن ‌در جاوا اسکریپت کمی توضیح دهیم. هدف متد fetch این است که درخواستی را به یک API ارسال کند و سپس یک Promise را بازگرداند. بررسی کامل Promise-ها در جاوا اسکریپت در قالب این مطلب قابل بیان نیست ولی به‌ صورت کلی می‌توان گفت که Promise نشان‌دهنده موفقیت یا شکست یک عملیات و بازگرداندن مقدار حاصل از آن است.

به زبان بسیار ساده Promise در جاوا اسکریپت مانند قول و قرارهایی است که امکان دارد هر فردی در زندگی روزانه با آن سروکار داشته باشد. امکان دارد فرد به قول و قرارهای خود پایبند باشد یا از آن‌ها بگذرد. در جاوا اسکریپت نیز Promise این رسالت را دارد. برای مثال اگر درخواستی به سمت یک صفحه وب از طریق کاربری ارسال شود و منتظر دریافت پاسخ باشد، دو حالت برای آن وجود خواهد داشت.

• درخواست پاسخ داده خواهد شد و کاربر به هدفش می‌رسد.
• درخواست رد می‌شود و کاربر خطا دریافت می‌کند.

تفاوت fetch با XHR چیست؟

یکی از قابل ‌توجه ترین تفاوت‌های متد fetch با XHR این است که fetch با Promise کار می‌کند ولی XHR با Callback به ارسال درخواست می‌پردازد. کار با Callback-ها در جاوا اسکریپت، نسبت به promise-ها در کاربردهای درخواست از API پیچیده‌تر است و توسعه‌ دهنده‌ها کمتر از آن استفاده می‌کنند.

همچنین متد Fetch در جاوا اسکریپت متدی مدرن و همه کاره است. از طرفی متد fetch توسط مرورگرهای قدیمی پشتیبانی نمی‌شود ولی همه مرورگرهای جدید از آن به‌خوبی پشتیبانی می‌کنند.

 

ارسال درخواست با متد Fetch در جاوا اسکریپت

برای ارسال درخواست توسط متد Fetch در جاوا اسکریپت تنها به یک پارامتر نیاز است که آن هم پارامتر URL منبعی است که واکشی از آن انجام شود. سینتکس ارسال درخواست با متد Fetch در جاوا اسکریپت به‌ صورت زیر است:

let response = fetch(url);

همان‌طور که گفته شد، متد fetch یک Promise را برمی‌گرداند، بنابراین می‌توان از متدهای then()

 ‎و catch()

 ‎برای مدیریت آن استفاده کرد. سینتکس این رویکرد به‌ صورت قطعه کد زیر خواهد بود:

fetch(url)

    .then(response => {

        // handle the response

    })

    .catch(error => {

        // handle the error

    });

وقتی درخواست تکمیل شد، یعنی منبع در دسترس است. با این شرایط، Promise به یک شی Response

 تبدیل می‌شود. شی Response

بسته‌بندی API برای منبع واکشی شده است. این شی تعدادی ویژگی و متد مفید برای بررسی پاسخ دارد.

خواندن پاسخ با متد Fetch در جاوا اسکریپت

اگر محتوای پاسخ به درخواست در قالب متن خام باشد، می‌توان از متد text()

برای خواندن آن استفاده کرد. متد text()

 ‎یک Promise را بازمی‌گرداند که حاوی محتویات کامل منبع واکشی شده است. سینتکس این روش به صورت قطعه کد زیر خواهد بود:

fetch('/readme.txt')

    .then(response => response.text())

    .then(data => console.log(data));

در عمل، اغلب از ویژگی async/await

 با متد fetch برای خواندن پاسخ به‌ صورت زیر استفاده می‌شود:

async function fetchText() {

    let response = await fetch('/readme.txt');

    let data = await response.text();

    console.log(data);

}

علاوه بر متد text()

، شی Response

انواع دیگری از متدهای دیگر را نیز بسته به نوع داده مربوطه به کار می‌گیرد که شامل موارد زیر هستند:

• json()‎
• blob()‎
• formData()‎
• arrayBuffer()‎
• clone()‎
• ‎redirect()‎

شی درخواست‌ در جاوا اسکریپت

شی «درخواست» (Request)، برای واکشی دارای عناصر مختلفی است. با استفاده از fetch می‌توان درخواست‌های پیشرفته و سفارشی شده را به API-های مختلف ارسال کرد. به صورت کلی در این درخواست، عناصر زیر میتوانند نقش داشته باشند.

• متد: GET، POST، PUT
• آدرس: URL درخواست
• «سربرگ‌ها» (Heders): سربرگ درخواست
•  «ارجاع کننده» (Referrer): ارجاع کننده درخواست
• حالت: Cors ،No-cors (به حالت‌های درخواست اشاره دارند برای مثال: در حالت No-cors اگر متد چیزی غیر از HEAD ،GET یا POST باشد و هدرها چیزی غیر از هدرهای ساده باشند، از درخواست جلوگیری می کند.)
• «اعتبار» (Validity)
• کش: حالت کش (پیش فرض، بارگیری مجدد، بدون کش)

کدهای وضعیت پاسخ برای متد Fetch در جاوا اسکریپت

شی Response

کد وضعیت و متن وضعیت را از طریق ویژگی‌های status

 و statusText

 ارائه می‌دهد. هنگامی‌ که درخواستی با موفقیت انجام می‌شود، کد وضعیت آن 200 است و متن وضعیت آن OK خواهد بود. این به معنای موفقیت در دسترسی به منبع است. قطعه کد زیر این رویکرد را نشان می‌دهد.

async function fetchText() {

    let response = await fetch('/readme.txt');

    console.log(response.status); // 200

    console.log(response.statusText); // OK

    if (response.status === 200) {

        let data = await response.text();

        // handle data

    }

}
fetchText();

خروجی آن به صورت زیر است:

200

OK

اگر منبع درخواستی وجود نداشته باشد، کد پاسخ، 404 است، در نمونه کد زیر این مسئله نشان داده شده است:

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400

console.log(response.statusText); // Not Found

خروجی به صورت زیر خواهد بود:

400

Not Found

اگر URL درخواستی خطای سرور ایجاد کند، کد پاسخ 500 خواهد بود. اگر URL درخواستی با پاسخ 300 تا ٣٠٩ به آدرس جدید تغییر مسیر دهد، وضعیت شی Response

روی 200 تنظیم می‌شود.

معرفی فیلم های آموزش جاوا اسکریپت

یکی از پرکاربردترین زبان‌های برنامه نویسی، جاوا اسکریپت است که در زمینه‌های مختلفی کاربرد دارد. این زبان در حال حاضر جزء محبوب‌ترین زبان‌های برنامه نویسی از لحاظ جامعه آماری و تعداد توسعه‌دهندگان به حساب می‌آید. همچنین جاوا اسکریپت دارای چارچوب‌های مختلفی به منظور تسریع و آسان‌سازی فرآیند برنامه نویسی است که هر کدام از آن‌ها برای اهداف گوناگون مانند، توسعه وب، توسعه اپلیکیشن، توسعه بازی و سایر موارد به کار گرفته می‌شوند. از طرف دیگر، نیاز به متخصصان جاوا اسکریپت در بیشتر کشورهای جهان روزبه‌روز در حال افزایش است و بازار کار و آینده این زبان برنامه نویسی تا حدود زیادی نویدبخش و امیدوار پیش‌بینی می‌شود.

یادگیری جاوا اسکریپت در حال حاضر از اهمیت بسیار بالایی برخوردار است و برای این هدف در پلتفرم آموزشی تم آف دوره‌های آموزش جاوا اسکریپت زیادی ارائه شده‌اند که به صورت جامع به آموزش این زبان محبوب می‌پردازند. این دوره‌ها در دسته‌های مختلفی اعم از آموزش جامع جاوا اسکریپت، آموزش فریمورک‌های جاوا اسکریپت، آموزش پروژه‌محور جاوا اسکریپت و سایر موارد در پلتفرم تم آف قرار دارند. در تصویر بالا تنها تعداد کمی از دوره‌های موجود در مجموعه آموزش جاوا اسکریپت، به‌عنوان نمونه آمده‌اند.

• برای مشاهده مجموعه‌ی کامل فیلم های آموزشی جاوا اسکریپت تم آف + اینجا کلیک کنید.

آموزش Fetch در جاوا اسکریپت به صورت گام به گام

در این بخش از مطلب قرار است که از صفر تا صد مثالی عملی از متد Fetch در جاوا اسکریپت ارائه شود. این بخش از آموزش به یک سری پیش‌نیاز وابسته است که در ادامه فهرست شده‌اند:

• یک محیط توسعه برای Node.js
• درک اولیه از کد نویسی در جاوا اسکریپت
• درک Promise در جاوا اسکریپت

مرحله 1: درک سینتکس Fetch API در جاوا اسکریپت

یکی از روش‌های استفاده از Fetch API، ارسال fetch() URL API

 به‌عنوان پارامتر است:

fetch(url)

متد fetch یک Promise را برمی‌گرداند. بعد از متد fetch، متد then()‎

 می‌آید که سینتکس آن به‌ صورت قطعه کد زیر خواهد بود:

fetch(url)

  .then(function() {

    // handle the response

  })

اگر Promise بازگردانده شده کد وضعیت آن 200 باشد، تابع داخل متد then()‎

 اجرا می‌شود. این تابع حاوی کدی برای مدیریت داده‌های دریافتی از API است. بعد از متد then()‎

متد catch()‎

 باید وارد شود که این عمل به‌ صورت قطعه کد زیر خواهد بود:

fetch(url)

  .then(function() {

    // handle the response

  })

  .catch(function() {

    // handle the error

  });

API که با استفاده از fetch فراخوانی می‌شود ممکن است خراب باشد یا خطاهای دیگری در فرایند ارسال درخواست رخ دهد. اگر این اتفاق بیفتد، همان‌طور که در بالا نیز به آن اشاره‌ شده است، Promise با شکست مواجه می‌شود. متد catch()‎

در این میان نقش رسیدگی به رد درخواست را دارد. به این معنی که اگر هنگام فراخوانی API مد نظر، خطایی رخ دهد، کد درون متد catch()‎

اجرا خواهد شد. با درک نحوه استفاده از Fetch API در جاوا اسکریپت، اکنون می‌توان مثالی واقعی را از متد Fetch در جاوا اسکریپت برای ارسال درخواست به یک API به کار گرفت.

مرحله 2: استفاده از Fetch برای دریافت داده از یک API

در ادامه مثال عملی از متد fetch به کار گرفته شده است. نمونه کد زیر بر اساس JSONPlaceholder API خواهد بود. با استفاده از منبع واکشی 10 کاربر در فهرست نویسندگان یا Authors واکشی خواهند شد. این مثال داده‌ها را از JSONPlaceholder API بازیابی می‌کند و در موارد بازیابی شده در لیست Authors در کنسول مرورگر وب نمایش می‌دهد. برای شروع کار باید یک فایل HTML ایجاد شود و عنوان آن Authors باشد:

Authors

حال باید تگ‌های اسکریپت به پایین فایل HTML اضافه شوند و از یک انتخاب‌گر DOM برای گرفتن ul

 استفاده شود. از getElementById

 برای Authors

 به‌عنوان آرگومان در این مثال استفاده‌ شده است:

Authors

نکته: Author-ها شناسه ul

قبلی ایجاد شده هستند.

پس از انجام این کار، لیستی به نام DocumentFragment

 ایجاد می‌شود که برای این هدف قطعه کد زیر به کار می‌رود:

همه عناصر «لیست ضمیمه‌ شده» (Appended List) به لیست ساخته‌ شده اضافه خواهند شد. سپس یک متغیر ثابت به نام url

 ایجاد می‌شود که URL API را نگه می‌دارد و ده کاربر تصادفی را از لیست Authors برمی‌گرداند. قطعه کد این بخش به‌ صورت زیر خواهد بود:

اکنون با استفاده از API JSONPlaceholder، آدرس واکشی یا url

 به وسیله متد Fetch در جاوا اسکریپت به‌عنوان آرگومان فراخوانی می‌شود:

قطعه کد به کار گرفته شده در واقع یک Fetch API است و URL

 را به JSONPlaceholder API ارسال می‌کند. سپس پاسخ دریافت می‌شود. با این حال، پاسخی که دریافت شده است، فایل JSON نیست، بلکه یک شی است که بسته به کاری که از آن خواسته می‌شود باید عملیاتی را روی آن انجام داد، سپس می‌توان از آن استفاده کرد. برای تبدیل شی برگشتی به JSON، می‌توان متد json()

 ‎را به کار گرفت. برای این کار باید از متد then()‎

 استفاده شود که حاوی تابعی با پارامتری به نام response

 است:

پارامتر response

، مقدار شیئی را می‌گیرد که از fetch(url)

 بازگردانده شده است،. برای این امر از متد json()

به منظور تبدیل قالب پاسخ به داده JSON استفاده خواهد شد که قطعه کد آن به‌ صورت زیر است:

داده‌های JSON برای استفاده هنوز نیاز به پردازش دارند. برای این کار یک متد then()‎

دیگر همراه تابعی باید اضافه شود که این متد آرگومانی به نام data

 دارد و قطعه کد مربوط به آن به صورت زیر است:

در این تابع، متغیری به نام authors

 باید ایجاد شود که در این جا این متغیر برابر با data

تنظیم شده است:

برای هر authors

باید یک «فهرست عناصر» (Item List) ایجاد شود تا نام آن‌ها را نمایش دهد. متد map()‎

 در جاوا اسکریپت برای این الگو مناسب است و به صورت زیر به کار گرفته خواهد شد:

در تابع map، متغیری به نام li

 باید ایجاد شود. این متغیر باید برابر با createElement

 به‌ عنوان آرگومان تنظیم شود. همچنین یک h2

 برای نام نویسنده و یک span

 برای ایمیل آن باید ایجاد شود. برای این کار قطعه کد زیر به کار خوهد رفت:

ویژگی innerHTML

 و «درون‌یابی رشته‌ای» (string interpolation) برای این کار مفید هستند و به‌ صورت قطعه کد زیر به کار خواهند رفت:

در این مرحله، عناصر DOM باید به appendChild

 وصل شوند که از طریق قطعه کد زیر این کار امکان‌پذیر خواهد بود:

باید به این نکته توجه داشت که هر عنصر در لیست، به لیست DocumentFragment

 اضافه می‌شود. برای این هدف پس از تکمیل متد map

 ، عناصر list

 به عنصر لیست نامرتب ul

 اضافه می‌شوند. با تکمیل کار هر دو تابع then()‎

اکنون می‌توان تابع catch()‎

 را اضافه کرد. این تابع خطای احتمالی را در کنسول ثبت می‌کند و به‌ صورت قطعه کد زیر به کار خواهد رفت.

کد کامل درخواست ایجاد شده با متد Fetch در جاوا اسکریپت به‌ صورت زیر خواهد بود:

Authors

در مثال ارائه‌ شده تا این مرحله، درخواست GET با استفاده از JSONPlaceholder API و Fetch API با موفقیت انجام شد. در مرحله بعد درخواست‌ POST با استفاده از JSONPlaceholder API مورد بررسی قرار خواهد گرفت.

ارسال شی Request با متد Fetch در جاوا اسکریپت

می‌توان با استفاده از متد Fetch در جاوا اسکریپت، یک شی Request

 ارسال کرد که قطعه کد آن به‌ صورت زیر خواهد بود:

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {

  name: 'Sammy'

}

let request = new Request(url, {

  method: 'POST',

  body: JSON.stringify(data),

  headers: new Headers({

    'Content-Type': 'application/json; charset=UTF-8'

  })

});




fetch(request)

  .then(function() {

    // Handle response you get from the API

  });

با این رویکرد، درخواست می‌تواند به‌عنوان تنها آرگومان برای fetch، جایگزین url

 و fetchData

 استفاده شود.

مثال کاربردی از fetch  در جاوا اسکریپت

در این بخش، مثال کاربردی دیگر از متد Fetch در جاوا اسکریپت ارائه می‌شود. برای این کار ابتدا باید فایل جاوا اسکریپت و فایل HTML لازم ساخته شوند. سپس باید URL API در یک متغیر (در اینجا api_url

است) ذخیره شود. در این مثال یک تابع async (در اینجا getapi()‎

 است) تعریف و api_url

در آن تابع ارسال‌ شده است. همچنین در این مثال یک response

 ثابت تعریف شده است و داده‌های واکشی شده با روش await fetch()

 ‎ذخیره ‌شده‌اند.

برای این هدف یک داده ثابت تعریف شده است و داده‌ها در قالب JSON با روش await answer.json()‎

 ذخیره ‌شده‌اند. اکنون با اجرای قطعه کد مربوط به آن، داده‌ها از API با متد fetch در متغیر داده دریافت می‌شوند. این متغیر داده را به تابعی منتقل می‌کند که داده‌های واکشی شده را نشان می‌دهد. تابع show

 متغیر داده را می‌گیرد و با اعمال حلقه در data.list

 و نشان دادن تمام سطرها، تمام داده‌ها را در کنسول ذخیره می‌کند. در این مثال نیز ویژگی innerHTML در فایل HTML تنظیم و به کار گرفته شده است.

• نکته: در اینجا API مورد استفاده حاوی جزئیات کارمندان به شکل جفت کلید-مقدار از آدرس زیر است.

https://employeedetails.free.beeceptor.com/my/api/path

قطعه کد جاوا اسکریپت مربوط به این مثال:

// api url
const api_url =
	"https://employeedetails.free.beeceptor.com/my/api/path";

// Defining async function
async function getapi(url) {
	
	// Storing response
	const response = await fetch(url);
	
	// Storing data in form of JSON
	var data = await response.json();
	console.log(data);
	if (response) {
		hideloader();
	}
	show(data);
}
// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
	document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
	let tab =
		`
		Name
		Office
		Position
		Salary
		`;
	
	// Loop to access all rows
	for (let r of data.list) {
		tab += `
	${r.name} 
	${r.office}
	${r.position}
	${r.salary}		
`;
	}
	// Setting innerHTML as tab variable
	document.getElementById("employees").innerHTML = tab;
}

قطعه کد HTML مربوط به این مثال:

	
		
		
		
		
		
	
	
		
		

			

				Loading...
			
		
		
Registered Employees
		
		
	

خروجی این مثال از متد Fetch در جاوا اسکریپت به صورت تصویر زیر در کنسول نمایش داده خواهد شد و درخواست ارسال شده برای هر کارمند اطلاعاتی مانند نام، اداره، موقعیت شغلی و میزان دستمزد را برمی‌گرداند :

سخن پایانی

متد fetch یکی از پرکاربردترین متدها در جاوا اسکریپت برای ارسال درخواست به API-های مختلف است. در این مطلب آموزشی از مجله تم آف، متد Fetch در جاوا اسکریپت و نحوه به کار گرفتن آن مورد بررسی قرار گرفت. همچنین در ادامه و پس از آشنایی با این متد، در قالب مثالی عملی، نحوه استفاده از این متد با درخواست‌های GET و POST آموزش داده شد و در آخر سر یک مثال کابردی دیگر برای آموزش آن مورد استفاده قرار گرفت. امید است که مطلب فوق برای شما مثمر ثمر واقع‌ شده باشد.