fetch JavaScript - một số phong cách viết code bạn đang dùng cách nào?

Khi muốn lấy dữ liệu từ phía server về và xử lý, chúng ta có thể sử dụng Fetch API. Trong bài viết này, mình xin giới thiệu một số phong cách viết code khi sử dụng fetch() mà các bạn có thể áp dụng nhé!

Trong bài viết này, mình sẽ đề cập đến cách viết code, còn việc xử lý dữ liệu thì mình sẽ không nói đến ở đây nhé 😁.

Sử dụng then/catch với fetch()

Đây là kiểu viết code - coding style khá đơn giản, mình xin tạo một ví dụ sau:

const url = "https://randomuser.me/api/?seed=homiedev";

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // data là một object
  });

Trong ví dụ này, mình gửi một request đến server để lấy dữ liệu (dạng json) và in ra Console. Cách sử dụng fetch() đơn giản nhất là fetch() nhận một đối số — đường dẫn đến tài nguyên mà bạn muốn tìm nạp. fetch() lúc này sẽ trả cho chúng ta một Response object.

Response object không trực tiếp chứa dữ liệu json. Vì vậy, để extract - trích xuất nội dung json từ Response object, chúng ta cần sử dụng method json(), method này trả về một promise và resolve với kết quả là một object JavaScript.

Đây là kiểu viết code mình cũng hay sử dụng vì cách viết khá nhanh gọn 😁.

Như mình đã nói ở trên, khi sử dụng method json(), method này trả về một promise 👌, từ đây chúng ta có thể biến tấu thành một cách viết khác như dưới đây:

fetch(url).then((response) => {
  response.json().then((data) => {
    console.log(data);
  });
});

Như các bạn thấy, thay vì return về promise để sử dụng cho .then() sau thì mình trực tiếp sử dụng .then() ngay sau response.json(). Nếu cách viết này bạn thấy thuận mắt thì có thể sử dụng cách này 😃, kết quả trả về cũng giống như cách trên.

Nếu chưa hiểu các khái niệm về Promise, then/catch bạn có thể tìm đọc tại học JavaScript cơ bản phần JavaScript Asynchronous nhé.

Sử dụng async/await với fetch()

Chúng ta còn một cách khác đó là sử dụng async/await. Để tìm hiểu về async/await các bạn có thể đọc bài viết: async await trong JavaScript là gì?.

Sử dụng dữ liệu ví dụ ở trên, chúng ta có cùng kết quả khi sử dụng async/await:

const url = "https://randomuser.me/api/?seed=homiedev";

(async function() {
  const response = await fetch(url);
  const data = await response.json();

  console.log(data)
})()

Trong cách làm này, mình sử dụng async function kết hợp với từ khóa await, đồng thời kết hợp sử dụng IIFE để thực thi hàm ngay. Tìm hiểu về IIFE tại: IIFE JavaScript là gì? tại sao các bạn nên sử dụng.

Như vậy là trong bài viết này, mình đã giới thiệu đến các bạn một số phong cách viết code khi chúng ta sử dụng fetch() trong JavaScript. Các bạn đang sử dụng cách nào? cùng thảo luận về nó ở bên dưới phần comment nhé 😁.

Chúc các bạn học tốt.