Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Hướng dẫn fetch API với project random Person Card API

@devnavMar 04, 20214 min read...

Hello các bạn, hôm nay chúng ta cùng học cách fetch API thông qua project này nhé 🔥😁.

🙌 Đầu tiên chúng ta cần có file setup nhé.

Mình đã setup sẵn project, chúng ta chỉ cần tải file về thôi.

HTML:

<div class="main">
  <div class="header-content">
    <h1>🚀 Random Person Card API Tutorial 🌈</h1>
    <h2>By 👉 Homiedev Blog 👩🏻‍💻</h2>
  </div>
  <div class="buttons">
    <div class="disable button btnPrev">Prev</div>
    <div class="button btnNext">Next</div>
  </div>
  <div class="wrapper"></div>
</div>

phần html khá đơn giản đúng kh nào. Mình tạo 2 button cho phần chuyển trang và div wrapper sẽ chứa person card của chúng ta 😁.

Vì phần css dài nên mình sẽ không đề cập đến nha ^^.

Chúng ta sẽ đến với phần Javascript.

Đầu tiên muốn fetch data được thì ta cần có một API nhé. mình sẽ lấy API của Random User Generator. Các bạn vô trang của họ để tìm hiểu thêm nha.

Mình sẽ lấy các phần tử là 2 button và div wrapper ra và khởi tạo biến currPage = 1 là số trang hiện tại.

const buttonNext = document.querySelector('.btnNext');
const buttonPrev = document.querySelector('.btnPrev');
const wrapper = document.querySelector('.wrapper');

let currPage = 1;

Tiếp theo mình thêm sự kiện click cho 2 button.

buttonNext.addEventListener('click', function () {
  ...
});
buttonPrev.addEventListener('click', function () {
  ...
});

Với buttonNext mình sẽ cho biến currPage thêm 1 đơn vị khi click vào button này để sang page kế tiếp. biến buttonPrev sẽ trở về trang trước đó 😄.

buttonNext.addEventListener('click', function () {
    currPage++;
});
buttonPrev.addEventListener('click', function () {
    currPage--;
});

Đến bước này ta cần xử lí khi người dùng click nhiều lần vào nút trở về trang trước thì mặc định page ban đầu đang là currPage = 0. nếu click tiếp nút trở về sẽ bị âm, như vậy có thể bị lỗi nên mình xử lí như sau:

buttonNext.addEventListener('click', function () {
    currPage++;
    if (currPage > 1) {
        buttonPrev.classList.remove('disable');
    }
});
buttonPrev.addEventListener('click', function () {
    currPage--;
    if (currPage <= 1) {
        buttonPrev.classList.add('disable');
    }
});

Mình sẽ thêm điều kiện currPage < 0 nếu thỏa mãn sẽ thêm class disable vào button này. Mục đích để ngăn người dùng click vào, bên css mình thêm thuộc tính pointer-events: none; sẽ ngăn sự kiện click.

Tiếp tục buttonNext mình sẽ remove class disable đi nếu thỏa điều kiện trên. Như vậy là ổn rồi ^^

Tiếp theo ta sẽ fetch data nhé, mình sẽ tạo một hàm xử lí fetch.

function handleFetch(currPage) {
    fetch(`https://randomuser.me/api/?page=${currPage}&results=15`)
        .then((res) => res.json())
        .then((data) => showData(data))
        .catch((error) => console.log(error));
}

Mình sẽ chuyền currPage là số trang hiện tại vào. Để lấy dữ liệu từ 1 url mình sẽ sử dụng fetch nhé. Tham số để get data gồm page là và vị trí page, results mình để là 15 nó sẽ trả về 1 mảng chứa dữ liệu gồm 15 phần tử ^^.

Dữ liệu trả về là data mình sẽ truyền vào một hàm khác là showData(), hàm này dùng xử lí các thứ liên quan đến thao tác trên DOM.

function showData(data) {
    wrapper.innerHTML = '';
    let dataUser = '';
    data.results.forEach((info) => {
        const {
            email,
            gender,
            location: { country },
            name: { title, first },
            picture: { large },
            registered: { age },
        } = info;
        dataUser += `<div class="person-item">
            <div class="header-info">
                <img
                    class="img"
                    src=${large}
                    alt=""
                />
                <div class="info">
                    <div class="name">${title}. ${first}</div>
                    <div class="country">${country}</div>
                </div>
            </div>    
            <div class="footer-info">
                <div class="more">
                    <span>${gender}</span>
                    <span>Age: ${age}</span>
                </div>
                <div class="email">${email}</div>
            </div>
        </div>`;
    });
    wrapper.innerHTML = dataUser;
}

Mình sẽ làm empty các phần tử cũ trong div wrapper sau mỗi lần dữ liệu mới được sử dụng. Mình dùng Destructuring assignment để thêm dữ liệu vào các div trên.

Như vậy là xong rồi 😁😁 ta chỉ cần thêm các hàm này vào nơi cần thiết thôi.

let currPage = 1;

// when loaded page
handleFetch(currPage);

buttonNext.addEventListener('click', function () {
    ...
    handleFetch(currPage);
});
buttonPrev.addEventListener('click', function () {
    ...
    handleFetch(currPage);
});

Kết quả cuối cùng của chúng ta ^^:

thumbnailFetchAPI

Như vậy là xong 😄😁 Hi vọng sau bài viết này các bạn sẽ thực hành để nắm vững kiến thức nhé. Chúc các bạn một ngày tốt lành 🔥🔥