XHR как Promise

Цель: упростить использование xhrRequest. Хочется, чтобы можно было просто передать набор параметров и получить в качестве ответа Promise. В итоге должен получиться некий аналог fetch. Также хочется иметь reject по таймауту, если сервер долго не отвечает.

Для этого оборачиваем xhrRequest в Promise. Парметры соединения передаем как объект. Чтобы можно было в вызывающем методе не перечислять все параметры, создаем дефолтный набор и с помощью Object.assign добавляем из него недостающие значения.

Примечание. Казалось бы, почему не использовать вместо него "..."? Потому что тогда не будет работать в MS Edge (на момент написания).

После отправки запроса запускаем таймер, также обернув его в Promise, и возвращаем в результате что сработает быстрее (Promise.race).

Использование:

let data = new FormData();
data.append('param1', value1);
data.append('param2', value2);
uxRequest({
  'url': '/path/to/script/', 
  'data': data
}).then(
    (result) => {
    //parse JSON
    let object = JSON.parse(result);
    //do something
  }    
)
.catch((err) => console.log('Augh, there was an error!', err));

Вспомогательный упрощенный вариант для загрузки изображений.

function loadImage (url) {
  return new Promise((resolve, reject) => {
  let image = document.createElement('img');
  image.src = url;

  // Important success and error for the promise
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(url);
    };

  });
}

export { loadImage };

Изображение:

loadImage('/path/to/image.jpg')
.then((image) => {
  //do something
})
.catch((error) => {
  console.log('Augh, there was an error', src);
});