Kiểm soát fetch với AbortController

1. AbortController là gì?

• AbortController là một Web API interface. Nó cung cấp một cách đơn giản để hủy các yêu cầu bất đồng bộ như fetch. Nó hoạt động dựa trên cơ chế tín hiệu (signal). Bạn có thể tạo một tín hiệu hủy và gắn nó vào yêu cầu. Khi tín hiệu này được kích hoạt, yêu cầu sẽ bị hủy.
• Đây là một sự cải tiến lớn so với các phương pháp cũ, vốn thường dựa vào các giải pháp thủ công hoặc các thư viện bên ngoài, gây phức tạp cho code. Với AbortController, mọi thứ trở nên gọn gàng và dễ quản lý hơn nhiều.

2. Cách sử dụng AbortController

Để sử dụng AbortController, bạn chỉ cần làm theo ba bước đơn giản sau.

Bước 1: Tạo một instance của AbortController như sau:

• controller.signal là đối tượng chứa tín hiệu hủy.

Bước 2: Truyền signal vào yêu cầu fetch

• Tiếp theo, khi gọi hàm fetch(), bạn chỉ cần thêm thuộc tính signal vào đối tượng options và gán nó bằng controller.signal.

• Hãy lưu ý rằng, khi yêu cầu bị hủy, fetch() sẽ trả về một Promise bị từ chối (rejected Promise) với lỗi có tên là 'AbortError'. Do đó, việc kiểm tra err.name là rất quan trọng để phân biệt lỗi hủy với các loại lỗi khác.

Bước 3: Hủy yêu cầu

• Cuối cùng, khi bạn muốn hủy yêu cầu, chỉ cần gọi phương thức abort() của đối tượng controller. Ngay lập tức, yêu cầu fetch đang chờ sẽ bị hủy.

Ví dụ minh họa dễ hiểu như bên dưới:

• Hãy xem xét một ví dụ thực tế hơn: một trang web có button “Load data” và “Cancel“.

• Đoạn code trên không chỉ minh họa cách hủy yêu cầu mà còn chỉ ra một trường hợp sử dụng phổ biến: hủy yêu cầu trước đó khi người dùng thực hiện một yêu cầu mới. Điều này giúp tránh các yêu cầu dư thừa và lãng phí tài nguyên.

3. Hủy bỏ EventListener

• Ngoài việc hủy fetch, AbortController còn là một công cụ cực kỳ hữu ích để gỡ bỏ các event listener. Điều này giúp tránh tình trạng rò rỉ bộ nhớ (memory leak) khi bạn thêm một listener tạm thời vào một element nào đó và cần gỡ bỏ khi hoàn tất.

• Thay vì đi removeEventListener như trước đây, bạn có thể sử dụng AbortController để abort() event một cách tự động như trên.

4. Tại sao AbortController quan trọng?

• Tiết kiệm tài nguyên: Hủy các yêu cầu không cần thiết giúp giảm tải cho cả trình duyệt lẫn máy chủ.
• Cải thiện trải nghiệm người dùng: Người dùng có thể nhanh chóng hủy các tác vụ chậm hoặc sai lầm, mang lại cảm giác kiểm soát tốt hơn.
• Code sạch và dễ bảo trì: AbortController cung cấp một cách tiếp cận chuẩn hóa và dễ hiểu, thay vì phải dùng các thủ thuật phức tạp.

5. Tài liệu tham khảo

• https://developer.mozilla.org/en-US/docs/Web/API/AbortController
• https://javascript.info/fetch-abort