مقدمه
زمانی بود که از XMLHttpRequest برای ایجاد درخواست های API استفاده می شد. شامل Promises نبود و کد جاوا اسکریپت تمیزی را ایجاد نکرد. با استفاده از jQuery، می توانید از سینتکس تمیزتر jQuery.ajax() استفاده کنید.
اکنون، جاوا اسکریپت راه داخلی خود را برای ایجاد درخواست های API دارد. این Fetch API است، استاندارد جدیدی برای درخواست سرور با Promises، اما شامل ویژگی‌های اضافی نیز می‌شود.
در این آموزش، شما هر دو درخواست GET و POST را با استفاده از Fetch API ایجاد خواهید کرد.
پیش نیازها
- یک محیط توسعه محلی برای Node.js.
- درک اولیه از کدنویسی در جاوا اسکریپت.
- درک Promises در جاوا اسکریپت.
مرحله 1 – شروع با Fetch API Syntax
یکی از روش‌های استفاده از Fetch API، ارسال fetch() URL API به عنوان پارامتر است:
fetch(url)
متد fetch() یک Promise برمی گرداند. بعد از متد fetch() متد Promise را وارد کنید then():
fetch(url)
.then(function() {
// handle the response
})اگر Promise برگردانده شده حل شود، تابع درون متد then() اجرا می شود. این تابع حاوی کدی برای مدیریت داده های دریافتی از API است.
بعد از متد then() متد catch() را وارد کنید:
fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});API که با استفاده از fetch() فرا می‌خوانید ممکن است خراب باشد یا خطاهای دیگری رخ دهد. اگر این اتفاق بیفتد، قول رد شده مسترد می شود. روش catch برای رسیدگی به رد استفاده می شود. اگر هنگام فراخوانی API مورد نظر شما خطایی رخ دهد، کد درون catch() اجرا خواهد شد.
با درک نحو استفاده از Fetch API، اکنون می توانید به استفاده از fetch() روی یک API واقعی بروید.
مرحله 2 – استفاده از Fetch برای دریافت داده از یک API
نمونه کد زیر بر اساس JSONPlaceholder API خواهد بود. با استفاده از API، ده کاربر دریافت خواهید کرد و آنها را با استفاده از جاوا اسکریپت در صفحه نمایش می دهید. این آموزش داده‌ها را از JSONPlaceholder API بازیابی می‌کند و در موارد فهرست در فهرست نویسنده نمایش می‌دهد.
با ایجاد یک فایل HTML و اضافه کردن یک عنوان و لیست نامرتب با شناسه نویسندگان شروع کنید:
<h1>Authors</h1>
<ul id="authors"></ul>تگ های اسکریپت را به پایین فایل HTML خود اضافه کنید و از یک انتخابگر DOM برای گرفتن ul استفاده کنید. از getElementById با نویسندگان به عنوان آرگومان استفاده کنید:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>به یاد داشته باشید، نویسنده ها شناسه ul قبلی ایجاد شده است.
سپس یک لیست ایجاد کنید که یک DocumentFragment است:
<script>
// ...
const list = document.createDocumentFragment();
</script>تمام موارد لیست ضمیمه شده به لیست اضافه خواهند شد. یک DocumentFragment بخشی از ساختار درخت سند فعال نیست. این مزیت این است که هنگام تغییر مدل شیء سند، ترسیم مجدد اثرگذار بر عملکرد ایجاد نمی کند.
یک متغیر ثابت به نام url ایجاد کنید که URL API را نگه می دارد که ده کاربر تصادفی را برمی گرداند:
<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>اکنون با استفاده از Fetch API، API JSONPlaceholder را با استفاده از fetch() با url به عنوان آرگومان فراخوانی کنید:
<script>
// ...
fetch(url)
</script>شما در حال فراخوانی Fetch API هستید و URL را به JSONPlaceholder API ارسال می کنید. سپس پاسخ دریافت می شود. با این حال، پاسخی که دریافت می‌کنید JSON نیست، بلکه یک شی با یک سری روش‌ها است که بسته به کاری که می‌خواهید با اطلاعات انجام دهید، می‌توان از آنها استفاده کرد. برای تبدیل شی برگشتی به JSON از متد json() استفاده کنید.
متد then() را اضافه کنید که حاوی تابعی با پارامتری به نام پاسخ است:
<script>
// ...
fetch(url)
.then((response) => {})
</script>پارامتر پاسخ، مقدار شی را که از fetch(url) برگردانده می شود، می گیرد. از متد json() برای تبدیل پاسخ به داده JSON استفاده کنید:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>داده‌های JSON هنوز باید پردازش شوند. یک عبارت then() دیگر با تابعی اضافه کنید که آرگومانی به نام داده دارد:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>در این تابع، یک متغیر به نام نویسنده ایجاد کنید که برابر با داده تنظیم شده است:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>برای هر نویسنده در نویسندگان، می خواهید یک آیتم فهرست ایجاد کنید که نام آنها را نمایش دهد. متد map() برای این الگو مناسب است:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>در تابع نقشه خود، متغیری به نام li ایجاد کنید که برابر با createElement با li (عنصر HTML) به عنوان آرگومان تنظیم شود. همچنین یک h2 برای نام و یک span برای ایمیل ایجاد کنید:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>عنصر h2 حاوی نام نویسنده خواهد بود. عنصر span حاوی ایمیل نویسنده خواهد بود. ویژگی innerHTML و درون یابی رشته ای به شما این امکان را می دهد که این کار را انجام دهید:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>سپس، این عناصر DOM را با appendChild وصل کنید:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>توجه داشته باشید که هر مورد لیست به لیست DocumentFragment اضافه می شود. پس از تکمیل نقشه، لیست به عنصر لیست نامرتب ul اضافه می شود.
با تکمیل هر دو تابع then() اکنون می توانید تابع catch() را اضافه کنید. این تابع خطای احتمالی را در کنسول ثبت می کند:
<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>این کد کامل درخواستی است که ایجاد کردید:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>شما به تازگی یک درخواست GET را با استفاده از JSONPlaceholder API و Fetch API با موفقیت انجام دادید. در مرحله بعد درخواست های POST را انجام خواهید داد.
مرحله 3 – رسیدگی به درخواست های POST
پیش‌فرض‌ها را برای درخواست‌های GET واکشی کنید، اما می‌توانید از همه انواع دیگر درخواست‌ها استفاده کنید، هدرها را تغییر دهید و داده‌ها را ارسال کنید. بیایید یک درخواست POST ایجاد کنیم.
ابتدا، یک متغیر ثابت بگنجانید که پیوند به JSONPlaceholder API را نگه می دارد:
const url = 'https://jsonplaceholder.typicode.com/users';
در مرحله بعد، باید شی خود را تنظیم کنید و آن را به عنوان آرگومان دوم تابع fetch ارسال کنید. این یک شی به نام داده با نام کلید و مقدار Sammy (یا نام شما) خواهد بود:
// ...
let data = {
name: 'Sammy'
}از آنجایی که این یک درخواست POST است، باید آن را به صراحت بیان کنید. یک شی به نام fetchData ایجاد کنید:
// ...
let fetchData = {
}این شی باید شامل سه کلید متد، بدنه و هدر باشد:
// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}کلید متد مقدار “POST” را خواهد داشت. body برابر با فرمت JSON.stringify شی داده ای که به تازگی ایجاد شده است تنظیم می شود. هدرها مقدار «Content-Type» را خواهند داشت: «application/json; charset=UTF-8′.
رابط Headers یکی از ویژگی های Fetch API است که به شما اجازه می دهد تا اقداماتی را روی هدرهای درخواست و پاسخ HTTP انجام دهید.
با قرار دادن این کد، درخواست POST را می توان با استفاده از Fetch API انجام داد. شما url و fetchData و آرگومان هایی را برای درخواست fetch POST خود اضافه می کنید:
// ...
fetch(url, fetchData)تابع then() شامل کدی است که پاسخ دریافتی از JSONPlaceholder API را مدیریت می کند:
// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});این کد کامل درخواستی است که ایجاد کردید:
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});همچنین می‌توانید 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 استفاده شود.
اکنون دو روش برای ایجاد و اجرای درخواست های POST با Fetch API می شناسید.
نتیجه
در حالی که Fetch API هنوز توسط همه مرورگرها پشتیبانی نمی شود، جایگزینی عالی برای XMLHttpRequest است.
