Holen vs. AjaxCall

Was ist der Unterschied zwischen typischen AJAX-und Fetch API?

Betrachten Sie dieses Szenario:

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

Dies ist, was die fetch Aufruf gibt:

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

Warum kommt es zurück, andere Dinge?

Gibt es eine Möglichkeit für fetch zur Rückgabe der gleichen Sache wie eine typische AJAX-call?

InformationsquelleAutor der Frage Darlyn | 2016-07-12

  1. 29

    Fetch API gebaut hat, in der Methoden für die verschiedenen Datentypen.

    Für ganz normale text/html, die Sie verwenden würden die text() - Methode, die eine Zusage zurückgibt, und Kette es mit einer anderen dann zu rufen.

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

    Den built-ins für die zurückgegebenen Inhalte ist wie folgt

    • clone() - Erstellt einen Klon von einem Response-Objekt.
    • Fehler() - Gibt einen
      neues Response Objekt im Zusammenhang mit einem Netzwerk-Fehler.
    • redirect() - Erstellt eine neue Reaktion mit einer anderen URL.
    • arrayBuffer() - Gibt ein Versprechen, das löst sich mit der ArrayBuffer.
    • blob() - Gibt ein Versprechen, löst sich mit einem Blob.
    • formData() - Gibt ein Versprechen, dass löst sich mit einem FormData-Objekt.
    • json() - Gibt ein Versprechen, dass löst sich mit einem JSON-Objekt.
    • text() - Gibt ein Versprechen, dass löst sich mit einem USVString (text).

    Können Sie auch schicke Sachen auf den server, oder fügen Sie Ihre eigenen Header etc.

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

    InformationsquelleAutor der Antwort adeneo

  2. 5

    Ihre ajaxCall Rücksendung der responseText vom XMLHttpRequest-Objekt. Es ist, filtern Sie es aus.

    Müssen Sie die Antwort Lesen, Text in der fetch-code. 

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

    Können Sie auch x.json() oder x.blob()

    InformationsquelleAutor der Antwort epascarello

Schreibe einen Kommentar