Могу ли я создать XMLHttpRequest, используя стандартную функцию JavaScript?

Question

Я хотел бы создать функцию, которая создает структуру желаемого XMLHttpRequest и выводит ее как переменную, которую я могу использовать. Я попытался сделать это с помощью следующего кода:

function prepareXMLHttpRequest(type) {
  var targetURL = 'http://localhost:3000/';

  var xhr = new XMLHttpRequest();
  xhr.open(type, targetURL, true);
  xhr.setRequestHeader('Content-Type', 'text/plain');
  //set any other options here
  return xhr;
}

Я собираюсь вызвать эту функцию с помощью GET или POST, а затем отправить результат:

prepareXMLHttpRequest("GET").then(function(getRequest) {
    getRequest.send();
    // Do something here, for example console.log the output
  })

prepareXMLHttpRequest("POST").then(function(postRequest) {
    postRequest.send(outputString);
  })

Когда я пытаюсь либоиз этих утверждений я получаю следующую ошибку:

PrepareXMLHttpRequest(...).then is not a function

Что я делаю не так?

Answer 1

Другим решением было бы использование fetch API. Это более современный подход к XMLHttpRequest, который по умолчанию использует обещания.

fetch("https://myapi.com")
    .then(response => response.json())
    .then(data => console.log(data))

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 2

То, что вы делаете неправильно, ожидает, что XMLHttpRequest будет иметь свойство then, но это не так. Чтобы результат от вашей функции был доступным, вам нужно вернуть обещание, как показано ниже

function prepareXMLHttpRequest(type) {
  var targetURL = 'http://localhost:3000/';
  return new Promise((resolve, reject) => {
  
    var xhr = new XMLHttpRequest();

    xhr.open(type, targetURL, true);
    xhr.setRequestHeader('Content-Type', 'text/plain');
    xhr.addEventListener('readystatechange', event => {
      event.readyState == 4 && event.status == 200 ? resolve(event) : reject(event)
    });
    xhr.send();
  })
}

Редактировать: приведенный выше фрагмент приведен только в качестве иллюстрации для хорошей реализации, которая использует XMLHttpRequest () и возвращает Promise, взгляните на WHATWG-выборки