هنگام ساخت برنامه‌ها برای اینکه بتوانیم داده‌ها را دریافت، ذخیره و دستکاری باید بین بک‌اند و فرانت‌اند تعامل داشته باشیم. این تعامل از طریق درخواست‌های HTTP امکان‌پذیر است. پنج متد محبوب HTTP وجود دارد که می‌توانیم از آن‌ها برای درخواست و تعامل با سرورهای خود استفاده کنیم. یکی از این متدهای HTTP متد GET است که می‌تواند داده‌ها را از سرور بازیابی کند. در این مقاله قصد داریم تا متد GET و نحوه درخواست اطلاعات مورد نیاز از سرور را باهم بررسی کنیم.
دو متد محبوب وجود دارد که می‌توانیم به راحتی از آن‌ها برای درخواست HTTP در جاوااسکریپت استفاده کنیم که عبارتند از: Fetch API و Axios.
Fetch API یکی از متدهای داخلی جاوااسکریپت برای بازیابی منابع و تعامل با سرور بک‌اند و API endpoint است. به دلیل این که Fetch API یک متد داخلی است نیازی به نصب در پروژه ما ندارد. در مقاله استفاده از Fetch API در جاوااسکریپت به صورت کامل این متد را بررسی کرده‌ایم.
Fetch API یک آرگومان اجباری دارد که شامل endpoint و یا URL مربوط به API می‌باشد. این متد یک آرگومان option را نیز می‌پذیرد که یک آبجکت اختیاری در هنگام درخواست GET است زیرا یک درخواست پیش‌فرض می‌باشد.
fetch(url, {
method: "GET" // default, so we can ignore
})
در ادامه یک درخواست GET برای دریافت پست از JSON Placeholder posts API ایجاد می‌کنیم.
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => console.log(json));
کد بالا یک پست منفرد برمی‌گرداند که می‌توانیم آن را در یک متغیر ذخیره کرده و در پروژه خود مورد استفاده قرار دهیم.
نکته‌ای که باید به آن توجه کنیم این است که برای متدهای دیگر مانند POST و DELETE باید متد را به آرایه optionها متصل کنیم.
Axios یک کتابخانه کلاینت HTTP است. این کتابخانه بر اساس promiseهایی است که ارسال درخواست‌های HTTP asynchronous به endpointهای REST را ساده‌تر می‌کند. ما می‌خواهیم یک درخواست GET به endpoint مربوط به JSONPlaceholder Posts API ارسال کنیم.
Axios برخلاف Fetch API یک متد داخلی نیست. این بدان معناست که باید Axios را در پروژه جاوااسکریپتی خود نصب کنیم. برای نصب یک dependency در پروژه جاوااسکریپتی ابتدا باید پروژه جدید npm را با اجرای دستور زیر در ترمینال مقداردهی اولیه کنیم:
$ npm init -y
اکنون می‌توانیم با اجرای دستور زیر Axios را در پروژه خود نصب کنیم:
$ npm install axios
بعد از آن که Axios با موفقیت نصب شد، می‌توانیم درخواست GET خود را ایجاد کنیم. این کد کاملاً شبیه درخواست Fetch API است. ما endpoint و یا URL مروط به API مورد نظر خود را به متد get()ارسال می‌کنیم که یک promise برمی‌گرداند. سپس می توانیم آن promise را با متدهای .then()و .catch()مدیریت کنیم.
axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));
نکته‌ای که در تفاوت بین این دو وجود دارد این است که برای Fetch API، ابتدا داده‌ها را به JSON تبدیل می‌کنیم اما Axios اینطور نیست و داده‌های ما را مستقیماً به عنوان داده JSON برمی‌گرداند.
تا این قسمت مقاله یاد گرفتیم که چگونه با Fetch API و Axios یک درخواست GET HTTP ایجاد کنیم. روش‌های دیگری مانند XMLHttpRequest و jQuery وجود دارند که در ادامه آن‌ها را بررسی خواهیم کرد.
ما می‌توانیم از آبجکت XMLHttpRequest برای تعامل با سرورها استفاده کنیم. این روش می‌تواند داده‌ها را از endpoint و یا URL مربوط به API یک سرور بدون انجام یک refresh کامل صفحه درخواست کند.
موضوعی که باید به آن توجه کنیم این است که همه مرورگرهای مدرن دارای یک آبجکت XMLHttpRequest داخلی برای درخواست داده از یک سرور هستند.
در ادامه همان درخواست را با XMLHttpRequest با ایجاد یک آبجکت XMLHttpRequest جدید انجام می‌دهیم. سپس با تعیین نوع درخواست و endpoint (URL سرور) یک اتصال ایجاد می‌کنیم، سپس درخواست را ارسال کرده و در نهایت پاسخ سرور را دریافت می‌کنیم.
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.response);
} else {
console.log(`Error: ${xhr.status}`);
}
};
در کد بالا یک آبجکت XMLHttpRequest جدید ایجاد کرده و در متغیری به نام xhrذخیره می‌کنیم. وقتی نوع درخواست (GET) و endpoint یا URLای را که می‌خواهیم داده‌ها را از آن درخواست کنیم مشخص می‌نماییم، اکنون می‌توانیم با استفاده از متغیر و متدی مانند.open()به تمام آجکت‌های آن دسترسی داشته باشیم.
متد دیگری که از آن استفاده خواهیم کرد.send()است که درخواست را به سرور ارسال می‌کند. همچنین می‌توانیم با استفاده از متد answerTypeفرمتی که می‌خواهیم داده‌ها در آن بازگردانده شوند را تعیین کنیم. در این مرحله درخواست GET ارسال می‌شود و تنها کاری که باید انجام دهیم این است که با استفاده از event listener به نام onloadپاسخ آن را دریافت کنیم.
اگر state کلاینت انجام شود (۴) و کد وضعیت موفقیت آمیز باشد (۲۰۰)، آنگاه داده‌ها در کنسول ثبت می‌شوند. در غیر این صورت یک پیغام خطایی که وضعیت خطا را نشان می‌دهد ظاهر خواهد شد.
ایجاد درخواست‌های HTTP در jQuery نسبتاً ساده و مشابه Fetch API و Axios می‌باشد. برای ساخت درخواست GET ابتدا باید jQuery را نصب کرده و یا از CDN آن در پروژه خود استفاده کنیم:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
در jQuery می‌توانیم با استفاده از $.getبه متد GET دسترسی پیدا کنیم که دو پارامتر دارد: endpoint و یا URL مروط به API و تابع callback که در صورت موفقیت‌آمیز بودن درخواست اجرا می‌شود.
$.get("https://jsonplaceholder.typicode.com/posts/1", (data, status) => {
console.log(data);
});
باید به این نکته توجه داشته باشیم که در تابع callback به داده‌های درخواست و وضعیت درخواست دسترسی داریم.
همچنین می‌توانیم از متد jQuery AJAX استفاده کنیم که کاملاً متفاوت بوده و می‌تواند برای درخواست‌های asynchronous مناسب باشد.
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET",
success: function (data) {
console.log(data);
}
});
در این مقاله با نحوه ایجاد درخواست HTTP GET در جاوااسکریپت آشنا شدیم. اکنون سوالی که ممکن است وجود داشته باشد این است که از کدام روش باید استفاده کنیم؟ اگر پروژه‌ای که داریم جدید است می‌توانیم بین Fetch API و Axios یکی را انتخاب کنیم. اما اگر بخواهیم از APIهای پایه برای یک پروژه کوچک استفاده کنیم، نیازی به استفاده از Axios وجود ندارد.
۵۰ درصد تخفیف ویژه زمستان فرانت کست تا ۱۴ دی
کد تخفیف: wnt
دیدگاه‌ها: