Hủy bỏ fetch request trong JavaScript - Cancel a Fetch Request in JavaScript

Khi sử dụng fetch trong JavaScript, chúng ta sẽ gửi một request đến server để lấy dữ liệu (trường hợp này sử dụng GET method), dữ liệu được trả về và chúng ta sử dụng cho nhiều mục đích. Trong một số trường hợp các bạn không còn muốn gửi request đến server hay muốn hủy một hoặc nhiều request thì chúng ta làm thế nào? Trong bài viết này, mình xin giới thiệu đến các bạn cách để hủy request khi dùng fetch nhé 😁.

Trong bài viết này, chúng ta sẽ sử dụng AbortController của JavaScript để hủy một hay nhiều lệnh gọi fetch.

👉 Dưới đây là quy trình để hủy một lệnh gọi fetch các bạn tham khảo nhé.

• Tạo một object sử dụng AbortController
• Object vừa tạo sẽ chứa thuộc tính signal
• Truyền signal vào fetch
• Sử dụng method abort() để hủy bỏ những request có sử dụng signal.

Để hiểu rõ hơn thì chúng ta cùng xem một ví dụ nhé, mình xin lấy một api đơn giản - https://randomuser.me/api/ để sử dụng trong ví dụ này.

const controller = new AbortController();
const { signal } = controller;

// Truyền thuộc tính signal vào fetch, trong trường hợp muốn hủy
// lệnh gọi fetch này
fetch("https://randomuser.me/api/", { signal }).then(response => {
    console.log(`Request is complete 🎉`);
}).catch(e => {
    console.log(`Fetch error: ${e.message} 😯`);
});

// Thử gọi lệnh hủy request
controller.abort();

Ở đoạn code trên, khi thực hiện gửi request lên server để lấy dữ liệu, mình đã sử dụng controller.abort() để hủy request này, kết quả là JavaScript sẽ đẩy ra một lỗi Fetch error: The user aborted a request. 😯.

Sử dụng fetch sẽ gửi request đến server và sẽ mất một khoảng thời gian để server xử lý và trả dữ liệu về (bất đồng bộ - asynchronous), trong lúc này thì JavaScript sẽ không chờ hoàn tất lệnh gọi fetch mà sẽ chạy xuống dòng controller.abort(), bắt gặp lệnh hủy request nên JavaScript sẽ hủy lệnh gọi fetch ở trên trước khi nó được hoàn tất. Khi method abort() được gọi, fetch sẽ reject với một Promise object chứa lý do bị hủy bỏ.

Những kiến thức trên mình đã nói đến ở phần JavaScript Error Handling và JavaScript Asynchronous ở chủ đề học JavaScript cơ bản các bạn có thể tham khảo thêm nhé!

Vậy trong trường hợp chúng ta muốn hủy các request theo ý muốn thì làm thế nào? đơn giản là chúng ta sử dụng signal cho các fetch muốn hủy lệnh gọi, ví dụ:

fetch("https://randomuser.me/api/", { signal })
  .then((response) => {
    console.log(response);
    console.log(`Request 1 is complete 🎉`);
  })
  .catch((e) => {
    console.log(`Fetch error: ${e.message} 😯`);
  });

fetch("https://randomuser.me/api/?results=1000", { signal })
  .then((response) => {
    console.log(response);
    console.log(`Request 2 is complete 🎉`);
  })
  .catch((e) => {
    console.log(`Fetch error: ${e.message} 😯`);
  });

// Sau 2 giây, hủy các request ở trên
setTimeout(() => {
  controller.abort();
}, 2000);

Như mình đã nói ở trên lệnh controller.abort() sẽ chỉ hoạt động trước khi lệnh gọi request được hoàn tất.

Đối với những bạn đang sử dụng Axios - một thư viện JavaScript dùng để tạo API requests, chúng ta có thể sử dụng AbortController như fetch để hủy một lệnh request.

const controller = new AbortController();
const { signal } = controller;

function abortRequest() {
  controller.abort()
}

axios.get("homiedev/api/example", {
  signal,
})

Như vậy là chúng ta đã cùng nhau tìm hiểu cách để hủy bỏ một request khi sử dụng fetch trong JavaScript. Hi vọng bài viết giúp ích cho các bạn 😁.

Chúc các bạn tìm được thứ gì đó hữu ích trong blog này!