Promise.prototype.finally được giới thiệu từ Google Chrome 63

Viết bởi @kcjpop

Đăng ngày

Dài 273 từ. Đọc trong 2 phút.

Theo tin từ trang Google Developers, Promise.prototype.finally sẽ được hỗ trợ mặc định từ phiên bản V8 v6.3.165+ và Chrome 63+. Phương thức này rất hữu dụng trong trường hợp lập trình viên cần thực thi một tác vụ nào đó trong cả hai trường hợp fulfilled hoặc rejected.

Một ví dụ rất thường gặp là hiển thị biểu tượng quay (loading icon) khi đang lấy dữ liệu từ server bằng AJAX. Khi dữ liệu được lấy thành công, bạn muốn ẩn biểu tượng quay và hiển thị nội dung. Trong trường hợp xảy ra lỗi, bạn cũng muốn ẩn biểu tượng quay và hiển thị thông báo lỗi.

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner()

  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text
      hideLoadingSpinner()
    })
    .catch((error) => {
      element.textContent = error.message
      hideLoadingSpinner()
    })
}

Như bạn có thể thấy, hàm hideLoadingSpinner() bị trùng lắp trong cả hai trường hợp fulfilledrejected. finally() có thể giúp giải quyết trường hợp này.

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner()

  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text
    })
    .catch((error) => {
      element.textContent = error.message
    })
    .finally(hideLoadingSpinner)
}

Bằng cách sử dụng finally() bạn có thể tách biệt phần mã xử lý trường hợp thành công/ lỗi với các tác vụ dọn dẹp. Điều này giúp mã nguồn của bạn gọn gàng hơn.

Bạn cũng có thể làm tương tự với async/await.

const fetchAndDisplay = async ({ url, element }) => {
  showLoadingSpinner()
  try {
    const response = await fetch(url)
    const text = await response.text()
    element.textContent = text
  } catch (error) {
    element.textContent = error.message
  } finally {
    hideLoadingSpinner()
  }
}

Bản tin Ehkoo hàng tuần 💌

Đăng ký ngay để nhận những tin và bài viết mới nhất về lập trình frontend, cũng như các thủ thuật hay thư viện mới…

Powered by Buttondown

Gửi tặng cà phê ☕️

Nếu thấy bài viết này hữu ích, bạn có thể gửi tặng Ehkoo một ly cà phê theo link bên dưới 👇

Cám ơn bạn rất nhiều 🤗