آموزش Fetch در جاوا اسکریپت — توضیح تابع و دستور + نمونه کد

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

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

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

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

1fetch('url')//api for the get request
2
3  .then(response => response.json())
4
5  .then(data => console.log(data));

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

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

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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 در جاوا اسکریپت به‌ صورت زیر است:

1let response = fetch(url);

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

1fetch(url)
2
3    .then(response => {
4
5        // handle the response
6
7    })
8
9    .catch(error => {
10
11        // handle the error
12
13    });

وقتی درخواست تکمیل شد، یعنی منبع در دسترس است. با این شرایط، Promise به یک شی Response  تبدیل می‌شود. شی Response بسته‌بندی API برای منبع واکشی شده است. این شی تعدادی ویژگی و متد مفید برای بررسی پاسخ دارد.

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

اگر محتوای پاسخ به درخواست در قالب متن خام باشد، می‌توان از متد text() برای خواندن آن استفاده کرد. متد text()  ‎یک Promise را بازمی‌گرداند که حاوی محتویات کامل منبع واکشی شده است. سینتکس این روش به صورت قطعه کد زیر خواهد بود:

1fetch('/readme.txt')
2
3    .then(response => response.text())
4
5    .then(data => console.log(data));

در عمل، اغلب از ویژگی async/await  با متد fetch برای خواندن پاسخ به‌ صورت زیر استفاده می‌شود:

1async function fetchText() {
2
3    let response = await fetch('/readme.txt');
4
5    let data = await response.text();
6
7    console.log(data);
8
9}

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

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

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

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

فیلم آموزش فریم ورک نود جی اس – آپلود فایل با Node.js در فرادرس

کلیک کنید

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

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

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

1async function fetchText() {
2
3    let response = await fetch('/readme.txt');
4
5    console.log(response.status); // 200
6
7    console.log(response.statusText); // OK
8
9    if (response.status === 200) {
10
11        let data = await response.text();
12
13        // handle data
14
15    }
16
17}
18fetchText();

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

200

OK

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

1let response = await fetch('/non-existence.txt');
2
3console.log(response.status); // 400
4
5console.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  به‌عنوان پارامتر است:

1fetch(url)

متد fetch یک Promise را برمی‌گرداند. بعد از متد fetch، متد then()‎  می‌آید که سینتکس آن به‌ صورت قطعه کد زیر خواهد بود:

1fetch(url)
2
3  .then(function() {
4
5    // handle the response
6
7  })

اگر Promise بازگردانده شده کد وضعیت آن 200 باشد، تابع داخل متد then()‎  اجرا می‌شود. این تابع حاوی کدی برای مدیریت داده‌های دریافتی از API است. بعد از متد then()‎ متد catch()‎  باید وارد شود که این عمل به‌ صورت قطعه کد زیر خواهد بود:

1fetch(url)
2
3  .then(function() {
4
5    // handle the response
6
7  })
8
9  .catch(function() {
10
11    // handle the error
12
13  });

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

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

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

1<h1>Authors</h1>
2
3<ul id="authors"></ul>

حال باید تگ‌های اسکریپت به پایین فایل HTML اضافه شوند و از یک انتخاب‌گر DOM برای گرفتن ul  استفاده شود. از getElementById  برای Authors  به‌عنوان آرگومان در این مثال استفاده‌ شده است:

1<h1>Authors</h1>
2
3<ul id="authors"></ul>
4
5<script>
6
7  const ul = document.getElementById('authors');
8
9</script>

نکته: Author-ها شناسه ul قبلی ایجاد شده هستند.

پس از انجام این کار، لیستی به نام DocumentFragment  ایجاد می‌شود که برای این هدف قطعه کد زیر به کار می‌رود:

1<script>
2
3  // ...
4
5  const list = document.createDocumentFragment();
6
7</script>

همه عناصر «لیست ضمیمه‌ شده» (Appended List) به لیست ساخته‌ شده اضافه خواهند شد. سپس یک متغیر ثابت به نام url  ایجاد می‌شود که URL API را نگه می‌دارد و ده کاربر تصادفی را از لیست Authors برمی‌گرداند. قطعه کد این بخش به‌ صورت زیر خواهد بود:

1<script>
2
3  // ...
4
5  const url = 'https://jsonplaceholder.typicode.com/users';
6
7</script>

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

1<script>
2
3  // ...
4
5  fetch(url)
6
7</script>

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

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {})
8
9</script>

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

کلیک کنید

پارامتر response ، مقدار شیئی را می‌گیرد که از fetch(url)  بازگردانده شده است،. برای این امر از متد json() به منظور تبدیل قالب پاسخ به داده JSON استفاده خواهد شد که قطعه کد آن به‌ صورت زیر است:

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {
8
9      return response.json();
10
11    })
12
13</script>

داده‌های JSON برای استفاده هنوز نیاز به پردازش دارند. برای این کار یک متد then()‎ دیگر همراه تابعی باید اضافه شود که این متد آرگومانی به نام data  دارد و قطعه کد مربوط به آن به صورت زیر است:

1<script>
2
3  // ...
4
5
6
7
8  fetch(url)
9
10    .then((response) => {
11
12      return response.json();
13
14    })
15
16    .then((data) => {})
17
18</script>

در این تابع، متغیری به نام authors  باید ایجاد شود که در این جا این متغیر برابر با data تنظیم شده است:

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {
8
9      return response.json();
10
11    })
12
13    .then((data) => {
14
15      let authors = data;
16
17    })
18
19</script>

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

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {
8
9      return response.json();
10
11    })
12
13    .then((data) => {
14
15      let authors = data;
16
17
18
19
20      authors.map(function(author) {
21
22      });
23
24    })
25
26</script>

در تابع map، متغیری به نام li  باید ایجاد شود. این متغیر باید برابر با createElement  به‌ عنوان آرگومان تنظیم شود. همچنین یک h2  برای نام نویسنده و یک span  برای ایمیل آن باید ایجاد شود. برای این کار قطعه کد زیر به کار خوهد رفت:

1<script>
2
3  // ...
4
5
6  fetch(url)
7
8    .then((response) => {
9
10      return response.json();
11
12    })
13
14    .then((data) => {
15
16      let authors = data;
17
18      authors.map(function(author) {
19
20        let li = document.createElement('li');
21
22        let name = document.createElement('h2');
23
24        let email = document.createElement('span');
25
26      });
27
28    })
29
30</script>

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

1<script>
2
3  // ...
4
5
6  fetch(url)
7
8    .then((response) => {
9
10      return response.json();
11
12    })
13
14    .then((data) => {
15
16      let authors = data;
17
18      authors.map(function(author) {
19
20        let li = document.createElement('li');
21
22        let name = document.createElement('h2');
23
24        let email = document.createElement('span');
25
26
27        name.innerHTML = `${author.name}`;
28
29        email.innerHTML = `${author.email}`;
30
31      });
32
33    })
34
35</script>

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

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {
8
9      return response.json();
10
11    })
12
13    .then((data) => {
14
15      let authors = data;
16
17      authors.map(function(author) {
18
19        let li = document.createElement('li');
20
21        let name = document.createElement('h2');
22
23        let email = document.createElement('span');
24
25        name.innerHTML = `${author.name}`;
26
27        email.innerHTML = `${author.email}`;
28
29        li.appendChild(name);
30
31        li.appendChild(email);
32
33        list.appendChild(li);
34
35      });
36
37    })
38
39  ul.appendChild(list);
40
41</script>

باید به این نکته توجه داشت که هر عنصر در لیست، به لیست DocumentFragment  اضافه می‌شود. برای این هدف پس از تکمیل متد map  ، عناصر list  به عنصر لیست نامرتب ul  اضافه می‌شوند. با تکمیل کار هر دو تابع then()‎ اکنون می‌توان تابع catch()‎  را اضافه کرد. این تابع خطای احتمالی را در کنسول ثبت می‌کند و به‌ صورت قطعه کد زیر به کار خواهد رفت.

1<script>
2
3  // ...
4
5  fetch(url)
6
7    .then((response) => {
8
9      // ...
10
11    })
12
13    .then((data) => {
14
15      // ...
16
17    })
18
19    .catch(function(error) {
20
21      console.log(error);
22
23    });
24
25  // ...
26
27</script>

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

1<h1>Authors</h1>
2
3<ul id="authors"></ul>
4
5
6<script>
7
8  const ul = document.getElementById('authors');
9
10  const list = document.createDocumentFragment();
11
12  const url = 'https://jsonplaceholder.typicode.com/users';
13
14  fetch(url)
15
16    .then((response) => {
17
18      return response.json();
19
20    })
21
22    .then((data) => {
23
24      let authors = data;
25
26
27
28
29      authors.map(function(author) {
30
31        let li = document.createElement('li');
32
33        let name = document.createElement('h2');
34
35        let email = document.createElement('span');
36
37        name.innerHTML = `${author.name}`;
38
39        email.innerHTML = `${author.email}`;
40
41        li.appendChild(name);
42
43        li.appendChild(email);
44
45        list.appendChild(li);
46
47      });
48
49    });
50
51    .catch(function(error) {
52
53      console.log(error);
54
55    });
56
57  ul.appendChild(list);
58
59</script>

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

فیلم آموزش کاربردی برنامه نویسی جی کوئری jQuery در فرادرس

کلیک کنید

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

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

1const url = 'https://jsonplaceholder.typicode.com/users';
2
3let data = {
4
5  name: 'Sammy'
6
7}
8
9let request = new Request(url, {
10
11  method: 'POST',
12
13  body: JSON.stringify(data),
14
15  headers: new Headers({
16
17    'Content-Type': 'application/json; charset=UTF-8'
18
19  })
20
21});
22
23
24
25
26fetch(request)
27
28  .then(function() {
29
30    // Handle response you get from the API
31
32  });

با این رویکرد، درخواست می‌تواند به‌عنوان تنها آرگومان برای 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

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

1// api url
2const api_url =
3	"https://employeedetails.free.beeceptor.com/my/api/path";
4
5// Defining async function
6async function getapi(url) {
7	
8	// Storing response
9	const response = await fetch(url);
10	
11	// Storing data in form of JSON
12	var data = await response.json();
13	console.log(data);
14	if (response) {
15		hideloader();
16	}
17	show(data);
18}
19// Calling that async function
20getapi(api_url);
21
22// Function to hide the loader
23function hideloader() {
24	document.getElementById('loading').style.display = 'none';
25}
26// Function to define innerHTML for HTML table
27function show(data) {
28	let tab =
29		`<tr>
30		<th>Name</th>
31		<th>Office</th>
32		<th>Position</th>
33		<th>Salary</th>
34		</tr>`;
35	
36	// Loop to access all rows
37	for (let r of data.list) {
38		tab += `<tr>
39	<td>${r.name} </td>
40	<td>${r.office}</td>
41	<td>${r.position}</td>
42	<td>${r.salary}</td>		
43</tr>`;
44	}
45	// Setting innerHTML as tab variable
46	document.getElementById("employees").innerHTML = tab;
47}

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

1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<script src="script.js"></script>
5		<link rel="stylesheet" href="style.css" />
6		<meta charset="UTF-8" />
7		<meta name="viewport"
8			content="width=device-width, initial-scale=1.0" />
9		<title>Document</title>
10	</head>
11	<body>
12		<!-- Here a loader is created which
13			loads till response comes -->
14		<div class="d-flex justify-content-center">
15			<div class="spinner-border"
16				role="status" id="loading">
17				<span class="sr-only">Loading...</span>
18			</div>
19		</div>
20		<h1>Registered Employees</h1>
21		<!-- table for showing data -->
22		<table id="employees"></table>
23	</body>
24</html>

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

سخن پایانی

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