XMLHttpRequest vs Fetch API - Giải Đáp Việt - Tri Thức Cho Người Việt

Rate this post

Khi bạn làm việc với Ajax trong Javascript, có hai phương pháp phổ biến mà bạn có thể sử dụng: XMLHttpRequest và Fetch API. Trong bài viết này, chúng ta sẽ tìm hiểu về hai phương pháp này và xem xét sự khác biệt giữa chúng.

Có thể bạn quan tâm

XMLHttpRequest

XMLHttpRequest là một đối tượng trong Javascript cho phép bạn gửi và nhận dữ liệu từ máy chủ thông qua các yêu cầu HTTP. Đây là một cách truyền thống để thực hiện Ajax và nó đã được sử dụng rộng rãi trong quá khứ.

Bạn đang xem: XMLHttpRequest vs Fetch API

Điều đầu tiên bạn cần làm là tạo một đối tượng XMLHttpRequest:

let xhr = new XMLHttpRequest();

Sau đó, bạn có thể mở một yêu cầu HTTP GET đến một địa chỉ cụ thể:

xhr.open('GET', 'http://domain/service');

Xem thêm : Có những thứ bạn tuyệt đối không nên cho vào hành lý khi đi máy bay, tưởng “vô tội” nhưng lại ẩn chứa nhiều rủi ro

Khi yêu cầu đã hoàn thành, bạn có thể xử lý phản hồi bằng cách sử dụng sự kiện onreadystatechange:

xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.log('Lỗi HTTP', xhr.status, xhr.statusText);
    }
};

xhr.send();

Ngoài ra, bạn còn có thể thiết lập timeout và theo dõi tiến trình tải lên bằng cách sử dụng các tùy chọn khác của đối tượng XMLHttpRequest.

Fetch API

Fetch API là một phương pháp hiện đại thay thế cho XMLHttpRequest. Nó cung cấp một cách tiếp cận mới và dễ hiểu hơn để thực hiện Ajax trong Javascript.

Ví dụ trên có thể được thay thế bằng Fetch API như sau:

fetch('http://domain/service', {
    method: 'GET'
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.error('Lỗi:', error));

Xem thêm : Cách Kiểm Tra Mỹ Phẩm Chính Hãng Bằng Mã Vạch Đơn Giản Nhất

Với Fetch API, bạn có thể sử dụng Promises và async/await để xử lý dữ liệu trả về từ yêu cầu. Nó cũng rất gọn gàng và dễ hiểu.

Vậy nên dùng XMLHttpRequest hay Fetch API?

Dù cả hai phương pháp đều có ưu điểm riêng, việc lựa chọn phụ thuộc vào tình huống cụ thể và yêu cầu của dự án của bạn. Cả hai đều có thể hoạt động tốt và được sử dụng rộng rãi trong cộng đồng phát triển.

Tuy nhiên, cần lưu ý rằng Fetch API không hoạt động trên một số phiên bản trình duyệt cũ và không hỗ trợ các sự kiện progress. Nếu bạn đang làm việc với các trình duyệt cũ hoặc cần báo cáo tiến trình, XMLHttpRequest có thể là lựa chọn tốt hơn.

Kết luận

Trên đây là một phân tích sơ bộ về sự khác biệt giữa XMLHttpRequest và Fetch API. Mỗi phương pháp đều có những ưu điểm và hạn chế riêng. Quyết định cuối cùng là của bạn, tùy thuộc vào yêu cầu và tình huống cụ thể của dự án.

Nếu bạn muốn tìm hiểu thêm về chủ đề này, bạn có thể tham khảo thêm tại Giải Đáp Việt – Tri Thức Cho Người Việt.

Nguồn: Giaidapviet.com
Danh mục: Khám Phá