Вызов XHR с использованием обратного вызова, обещания и наблюдаемого через ванильный JavaScript

XMLHttpRequest — это объект, используемый JavaScript для асинхронного вызова сетевого API через HTTP.

Поскольку вызов, сделанный JavaScript, является асинхронным, должен быть какой-то механизм для обработки ответа (успешного или ошибочного), когда он возвращается.

Давайте обсудим 3 разных способа обработки ответа API:

1. Обратный звонок

function getPlayresWithCallBack(url, success, error) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onload = function () {
        success(this.responseText);
    }
    xmlHttp.onerror = function () {
        error(this.status)
    }
    xmlHttp.open('GET', url);
    xmlHttp.send();
}

2. Обещание

function getPlayersWithPromise(url) {
    var xmlHttp = new XMLHttpRequest();
    let promise = new Promise(function(resolve, reject){ 
        xmlHttp.onload = function () {
            resolve(this.responseText);
        }
        xmlHttp.onerror = function () {
           reject(this.status);
        }
        xmlHttp.open('GET', url);
        xmlHttp.send();
    });
    return promise;
}

3. Наблюдаемый

function getPlayersWithObservable(url) {
    let observable = Rx.Observable.create((observer) =>{
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onload = function () {
            observer.next(this.responseText);}
        xmlHttp.onerror = function () {
            observer.error(this.status)
        }
        xmlHttp.open('GET', url);
        xmlHttp.send();
     }); 
     return observable;
}

Давайте объявим нашу функцию обработчика успеха и ошибок и

function success(responseText) {
    document.write(responseText);
}
function error(status) {
    document.write(status);
}

Наконец, давайте объединим все части вместе

//1. callback based
getPlayresWithCallBack('/api/players', success, error)
//2. Promise based    getPlayersWithPromise('/api/players').then(success).catch(error);
    
//3. Observable based
getPlayersWithObservable('/api/players').subscribe(success, error);

Вот и все, готово!!!

Спасибо за чтение! Вы можете найти полный код на https://github.com/sonusinghrajput11/Node/tree/master/xhr-demo