Fetch vs. AjaxCall

Question

Fetch vs. AjaxCall

Jaka jest różnica między typowym AJAX i API Fetch?

Rozważ ten scenariusz:

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

Oto co zwraca fetch wywołanie:

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

Dlaczego zwraca różne rzeczy?

Czy istnieje sposób, aby fetch Zwrócić to samo, co typowe wywołanie AJAX?

26

javascript ajax fetch-api

Author: Xufox, 2016-07-12

Source

2 answers

Twój ajaxCall zwraca responseText z obiektu XMLHttpRequest. Filtruje to.

Musisz przeczytać tekst odpowiedzi w kodzie pobierania.

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

Możesz również użyć x.json() lub x.blob()

5

Author: epascarello,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-12 16:04:27

score 29 · Accepted Answer

API Fetch ma wbudowane metody dla różnych typów danych.
Dla zwykłego tekstu / html użyłbyś metody text(), która również zwraca obietnicę i połączy ją z innym wywołaniem then.

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

Wbudowane dla zwracanej zawartości są następujące

clone() - tworzy klon obiektu odpowiedzi.
error () - Zwraca a nowy obiekt odpowiedzi związany z błędem sieciowym.
redirect () - tworzy nową odpowiedź z innym adresem URL.
arrayBuffer() - zwraca obietnicę, która rozwiązuje się za pomocą ArrayBuffer.
blob() - zwraca obietnicę, która rozwiązuje się za pomocą Bloba.
formData() - zwraca obietnicę, która zostanie rozwiązana za pomocą obiektu FormData.
json () - zwraca obietnicę, która rozwiązuje się za pomocą obiektu JSON.
text() - zwraca obietnicę, która rozwiązuje się za pomocą USVString (text).

Pozwala również na wysyłanie rzeczy na serwer, dodawanie własnych nagłówków itp.

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);
});