آموزش ساخت یک برنامه ساده با Fetch API در جاوا اسکریپت: راهنمای گام به گام

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

اهداف این مقاله:

• معرفی Fetch API

• ساختار درخواست‌های HTTP

• نحوه مدیریت داده‌های دریافت‌شده و نمایش آن‌ها در HTML

• نکات مهم در بهینه‌سازی کد و سئو

پیش‌نیازها

قبل از شروع باید دانش پایه‌ای از HTML، CSS و جاوااسکریپت داشته باشید. همچنین باید با مفاهیم اولیه درخواست‌های HTTP (GET و POST) آشنا باشید.

گام اول: ساختار کلی HTML

ابتدا یک فایل HTML ساده برای برنامه ایجاد می‌کنیم. در اینجا یک بخش برای نمایش لیست کاربران و یک دکمه برای بارگذاری داده‌ها در نظر گرفته‌ایم.

< ! DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title >Fetch API Example< / title >
    < style >
        body {
            font-family: Arial, sans-serif;
        }
        .user-list {
            list-style-type: none;
            padding: 0;
        }
        .user-item {
            margin: 5px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    < / style >
< / head >
< body >
    < h1 >لیست کاربران< / h1 >
    < button id="loadUsersBtn">بارگذاری کاربران< / button >
    < ul id="userList" class="user-list" > < / ul >

    < script src="app.js" >< / script >
< / body >
< / html >

در این فایل HTML:

• یک دکمه با شناسه loadUsersBtn برای بارگذاری کاربران قرار داده شده است.

• یک لیست بدون ترتیب (ul) با شناسه userList برای نمایش کاربران اضافه شده است.

گام دوم: نوشتن کد جاوااسکریپت با استفاده از Fetch API

حالا نوبت به نوشتن کد جاوااسکریپت برای دریافت داده‌ها از API و نمایش آن‌ها در صفحه می‌رسد. این کد را در فایل app.js قرار می‌دهیم.

document.getElementById('loadUsersBtn').addEventListener('click', loadUsers);

async function loadUsers() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const users = await response.json();
        displayUsers(users);
    } catch (error) {
        console.error('Error fetching users:', error);
    }
}

function displayUsers(users) {
    const userList = document.getElementById('userList');
    userList.innerHTML = ''; // پاک کردن محتوای قبلی
    users.forEach(user => {
        const listItem = document.createElement('li');
        listItem.classList.add('user-item');
        listItem.textContent = `${user.name} - ${user.email}`;
        userList.appendChild(listItem);
    });
}

توضیح کد:

• در ابتدای کد، یک رویداد (event listener) به دکمه بارگذاری کاربران اضافه کرده‌ایم. این رویداد با کلیک روی دکمه فراخوانی می‌شود.

• تابع loadUsers از Fetch API استفاده می‌کند تا یک درخواست GET به آدرس https://jsonplaceholder.typicode.com/users ارسال کند و لیستی از کاربران را دریافت کند.

• با استفاده از await، منتظر می‌مانیم تا داده‌ها از سرور برگردند. در صورت موفقیت‌آمیز بودن درخواست، داده‌ها را به فرمت JSON تبدیل می‌کنیم.

• در صورت بروز خطا (مثلاً مشکل شبکه یا خطای سرور)، با استفاده از try/catch خطا را مدیریت می‌کنیم.

• تابع displayUsers لیست کاربران دریافت شده را از طریق ایجاد عناصر HTML (li) به لیست ul اضافه می‌کند و نام و ایمیل هر کاربر را نمایش می‌دهد.

گام سوم: بهینه‌سازی کد

برای بهبود کارایی برنامه و همچنین اطمینان از سئوی مناسب، می‌توان چند نکته کلیدی را در نظر گرفت:

• مدیریت خطاها: حتماً برای مدیریت خطاهای احتمالی از ساختار try/catch استفاده کنید تا تجربه کاربری بهتر شود و برنامه هنگام بروز خطا همچنان قابل استفاده باقی بماند.

• بهینه‌سازی سرعت بارگذاری: از طریق بهینه‌سازی درخواست‌ها و استفاده از کش مرورگر، می‌توانید سرعت بارگذاری داده‌ها را بهبود ببخشید. همچنین می‌توانید داده‌ها را از قبل بارگذاری کنید و در زمان نیاز نمایش دهید.

• ملاحظات سئو: اطمینان حاصل کنید که محتوای نمایش داده شده بهینه باشد و بتواند توسط موتورهای جستجو به درستی ایندکس شود. برای این منظور، مطمئن شوید که محتوای داینامیک (تولید شده با جاوااسکریپت) قابل دسترسی برای موتورهای جستجو است.

نکات سئویی برای بهبود رتبه‌بندی

• استفاده از محتوای قابل مشاهده در سرور: محتوایی که با Fetch API دریافت می‌شود، ممکن است توسط موتورهای جستجو به درستی ایندکس نشود. یکی از روش‌های بهینه‌سازی این است که از رندر سمت سرور (Server-Side Rendering یا SSR) استفاده کنید تا محتوای داینامیک از همان ابتدا برای موتورهای جستجو قابل مشاهده باشد.

• بارگذاری تنبل (Lazy Loading): داده‌های غیرضروری را فقط زمانی که کاربر به آن نیاز دارد بارگذاری کنید. این روش به بهبود سرعت بارگذاری اولیه سایت کمک می‌کند.

• زمان بارگذاری سریع‌تر: زمان بارگذاری سریع سایت باعث بهبود رتبه در موتورهای جستجو می‌شود. سعی کنید تا حد ممکن تعداد و حجم درخواست‌های HTTP را بهینه کنید.

نتیجه‌گیری

با استفاده از Fetch API می‌توانید به راحتی درخواست‌های HTTP را مدیریت کنید و داده‌ها را از سرور دریافت و نمایش دهید. این API قدرتمند به شما امکان می‌دهد تا برنامه‌های وب تعاملی و بهینه‌تری بسازید. همچنین با رعایت نکات سئویی مانند بهینه‌سازی محتوا برای موتورهای جستجو و مدیریت صحیح درخواست‌ها، می‌توانید رتبه سایت خود را بهبود دهید.