Fetch vs. AjaxCall

В чем разница между типичными API AJAX и Fetch?

Рассмотрим этот сценарий:

function ajaxCall(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}

ajaxCall('www.testSite').then(x => {
  console.log(x)
}) // returns html of site

fetch('www.testSite').then(x => {
  console.log(x)
}) // returns object with information about call

Это то, что возвращает вызов fetch:

Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…}

Почему он возвращает разные вещи?

Есть ли способ для fetch вернуть то же самое, что и обычный вызов AJAX?

Ответы

Ответ 1

В API-интерфейсе Fetch встроены методы для разных типов данных.
Для обычного текста /html вы должны использовать метод text(), который также возвращает обещание, а затем его цепочку с другим вызовом.

fetch('www.testSite').then( x => { 
    return x.text();
}).then( y => {
    console.log(y);
});

Встроенные элементы для возвращаемого содержимого выглядят следующим образом

  • clone() - Создает клон объекта Response.
  • error() - возвращает новый объект Response, связанный с сетевой ошибкой.
  • redirect() - Создает новый ответ с другим URL-адресом.
  • arrayBuffer() - возвращает обещание, которое разрешается с помощью ArrayBuffer.
  • blob() - возвращает обещание, которое разрешается с помощью Blob.
  • formData() - возвращает обещание, которое разрешается с помощью объекта FormData.
  • json() - возвращает обещание, которое разрешается с помощью объекта JSON.
  • text() - возвращает обещание, которое разрешается с помощью USVString (текст).

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

fetch('www.testSite', {
    method  : 'post',
    headers : new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    }),
    body    : new FormData(document.getElementById('myform'))
}).then( response => {
    return response.json(); // server returned valid JSON
}).then( parsed_result => {
    console.log(parsed_result);
});

Ответ 2

Ваш ajaxCall возвращает responseText из объекта XMLHttpRequest. Он отфильтровывает его.

Вам нужно прочитать текст ответа в коде выборки.

fetch('www.testSite').then( x => { console.log(x.text()); } )

Вы также можете использовать x.json() или x.blob()