Як я обіцяю рідний XHR?

Я хочу використовувати (уроджене) обіцянки в моєму додатку для інтерфейсів для виконання запиту XHR, але без усієї томографії з масивними рамками.

Я хочу , щоб мій XHR повернути обіцянку , але це не працює (даючи мені: Uncaught TypeError: Promise resolver undefined is not a function)

function makeXHRRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() { return new Promise().resolve(); };
  xhr.onerror = function() { return new Promise().reject(); };
  xhr.send();
}

makeXHRRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
});

Я припускаю, що ви знаєте, як зробити власний XHR-запит (ви можете накреслити тут і тут )

Оскільки будь-який веб-переглядач, який підтримує вродні обіцянки , також підтримуватиме xhr.onload, ми можемо пропустити всі onReadyStateChangeмеморіали. Давайте зробимо крок назад і почнемо з основної функції запиту XHR, використовуючи зворотні дзвінки:

function makeRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

// And we'd call it as such:

makeRequest('GET', 'http://example.com', function (err, datums) {
  if (err) { throw err; }
  console.log(datums);
});

Ура! Це не передбачає нічого страшно складного (наприклад, власні заголовки чи дані POST), але достатньо, щоб ми рухалися вперед.

Конструктор обіцянок

Ми можемо побудувати обіцянку так:

new Promise(function (resolve, reject) {
  // Do some Async stuff
  // call resolve if it succeeded
  // reject if it failed
});

Конструктор обіцянок бере функцію, якій буде передано два аргументи (назвемо їх resolveі reject). Ви можете вважати це зворотними дзвінками, один за успіх і один за невдачу. Приклади приголомшливі, давайте оновимо makeRequestцей конструктор:

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

// Example:

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Тепер ми можемо використовувати сили обіцянок, прив'язуючи декілька викликів XHR (і це .catchспровокує помилку на будь-якому дзвінку):

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  return makeRequest('GET', datums.url);
})
.then(function (moreDatums) {
  console.log(moreDatums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Ми можемо вдосконалити це ще далі, додавши параметри POST / PUT та власні заголовки. Давайте використовувати об’єкт параметрів замість кількох аргументів, з підписом:

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object
}

makeRequest тепер виглядає приблизно так:

function makeRequest (opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    // We'll need to stringify if we've been given an object
    // If we have a string, this is skipped.
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

// Headers and params are optional
makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Більш комплексний підхід можна знайти в MDN .

Крім того, ви можете використовувати API для отримання ( polyfill ).

Це може бути таким же простим, як наступний код.

Майте на увазі, що цей код запускатиме rejectзворотний виклик лише тоді, коли onerrorвикликається ( лише мережеві помилки), а не тоді, коли код статусу HTTP означає помилку. Це також виключає всі інші винятки. Поводження з ними повинно залежати від вас, ІМО.

Крім того, рекомендується викликати rejectзворотний виклик з екземпляром Errorі не самою подією, але заради простоти я залишив як є.

function request(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

І посилатися на це могло б це:

request('GET', 'http://google.com')
    .then(function (e) {
        console.log(e.target.response);
    }, function (e) {
        // handle errors
    });

Для всіх, хто зараз шукає це, ви можете скористатися функцією вибору . Він має досить гарну підтримку .

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Я спершу використав відповідь @ SomeKittens, але потім виявив, fetchщо це робить для мене поза скринькою :)

Я думаю, що ми можемо зробити верхню відповідь набагато гнучкішою та багаторазовою, не створивши її XMLHttpRequest. Єдиною перевагою цього є те, що для цього нам не потрібно писати 2 або 3 рядки коду, і це має величезний недолік позбавлення нашого доступу до багатьох функцій API, наприклад, встановлення заголовків. Він також приховує властивості вихідного об'єкта від коду, який повинен обробляти відповідь (як для успіхів, так і для помилок). Таким чином, ми можемо зробити більш гнучку, більш широко застосовну функцію, просто прийнявши XMLHttpRequestоб'єкт як вхідний і передавши його як результат .

Ця функція перетворює довільний XMLHttpRequestоб'єкт у обіцянку, трактуючи коди статусу не 200 як помилку за замовчуванням:

function promiseResponse(xhr, failNon2xx = true) {
    return new Promise(function (resolve, reject) {
        // Note that when we call reject, we pass an object
        // with the request as a property. This makes it easy for
        // catch blocks to distinguish errors arising here
        // from errors arising elsewhere. Suggestions on a 
        // cleaner way to allow that are welcome.
        xhr.onload = function () {
            if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                reject({request: xhr});
            } else {
                resolve(xhr);
            }
        };
        xhr.onerror = function () {
            reject({request: xhr});
        };
        xhr.send();
    });
}

Ця функція дуже природно вписується у ланцюжок Promises, не втрачаючи гнучкості XMLHttpRequestAPI:

Promise.resolve()
.then(function() {
    // We make this a separate function to avoid
    // polluting the calling scope.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/');
    return xhr;
})
.then(promiseResponse)
.then(function(request) {
    console.log('Success');
    console.log(request.status + ' ' + request.statusText);
});

catchбуло пропущено вище, щоб спростити код зразка. Ви завжди повинні мати його, і ми, звичайно, можемо:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(promiseResponse)
.catch(function(err) {
    console.log('Error');
    if (err.hasOwnProperty('request')) {
        console.error(err.request.status + ' ' + err.request.statusText);
    }
    else {
        console.error(err);
    }
});

І відключення обробки коду статусу HTTP не потребує значних змін у коді:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(function(xhr) { return promiseResponse(xhr, false); })
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

Наш код виклику довший, але концептуально зрозуміти, що відбувається. І нам не доведеться перебудовувати весь API веб-запиту лише для підтримки його функцій.

Ми також можемо додати декілька функцій зручності, щоб також виправити наш код:

function makeSimpleGet(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    return xhr;
}

function promiseResponseAnyCode(xhr) {
    return promiseResponse(xhr, false);
}

Тоді наш код стає:

Promise.resolve(makeSimpleGet('https://stackoverflow.com/doesnotexist'))
.then(promiseResponseAnyCode)
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

На мій погляд, відповідь jpmc26 досить близька до ідеальної. Однак він має деякі недоліки:

1. Він виставляє запит xhr лише до останнього моменту. Це не дозволяєPOST -просить задати тіло запиту.
2. Це важче читати як вирішальне send виклик приховано всередині функції.
3. Він вводить зовсім небагато котлових плит при фактичному оформленні запиту.

Мавпа, яка виправляє об'єкт xhr, вирішує ці проблеми:

function promisify(xhr, failNon2xx=true) {
    const oldSend = xhr.send;
    xhr.send = function() {
        const xhrArguments = arguments;
        return new Promise(function (resolve, reject) {
            // Note that when we call reject, we pass an object
            // with the request as a property. This makes it easy for
            // catch blocks to distinguish errors arising here
            // from errors arising elsewhere. Suggestions on a 
            // cleaner way to allow that are welcome.
            xhr.onload = function () {
                if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                    reject({request: xhr});
                } else {
                    resolve(xhr);
                }
            };
            xhr.onerror = function () {
                reject({request: xhr});
            };
            oldSend.apply(xhr, xhrArguments);
        });
    }
}

Зараз використання просте, як:

let xhr = new XMLHttpRequest()
promisify(xhr);
xhr.open('POST', 'url')
xhr.setRequestHeader('Some-Header', 'Some-Value')

xhr.send(resource).
    then(() => alert('All done.'),
         () => alert('An error occured.'));

Звичайно, це спричиняє і інший недолік: виправлення мавп пошкоджує продуктивність. Однак це не повинно бути проблемою, якщо припустити, що користувач чекає в основному результату xhr, що сам запит приймає порядки більше, ніж налаштування виклику, а запити xhr не надсилаються часто.

PS: І звичайно, якщо орієнтуватися на сучасні браузери, використовуйте вибір!

PPS: У коментарях було зазначено, що цей метод змінює стандартний API, що може заплутати. Для більшої ясності можна обклеїти інший метод на об’єкт xhr sendAndGetPromise().