Fetch gegen AjaxCall

Question

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

dieses Szenario vor:

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 zurückkehrt:

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

Warum es verschiedene Dinge zurückkehrt?

Gibt es eine Möglichkeit für fetch, das gleiche wie ein typischer AJAX-Anruf zurückzugeben?

Answer 1

Die API in Methoden gebaut für verschiedene Datentypen hat Fetch verwenden.
Für nur normalen Text/html würden Sie die text() Methode verwenden, die auch ein Versprechen zurückgibt, und es mit einem anderen dann ketten.

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

Die Einbauten für den zurückgegebenen Inhalt ist als

• clone() folgt - Erzeugt ein Klon eines Antwortobjekt.
• error() - Gibt ein neues Response-Objekt zurück, das mit einem Netzwerkfehler verknüpft ist.
• redirect() - Erstellt eine neue Antwort mit einer anderen URL.
• arrayBuffer() - Gibt eine Zusage zurück, die mit einem ArrayBuffer aufgelöst wird.
• blob() - Gibt eine Zusage zurück, die mit einem Blob aufgelöst wird.
• formData() - Gibt eine Zusage zurück, die mit einem FormData-Objekt aufgelöst wird.
• json() - Gibt eine Zusage zurück, die mit einem JSON-Objekt aufgelöst wird.
• text() - Gibt eine Zusage zurück, die mit einem USVString (Text) aufgelöst wird.

Es erlaubt Ihnen auch Dinge an den Server zu schicken, oder fügen Sie Ihre eigenen Header usw.

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

Answer 2

Ihr ajaxCall gibt den responseText vom XMLHttpRequest-Objekt zurück. Es filtert es aus.

Sie müssen den Antworttext im Abrufcode lesen.

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

können Sie auch x.json() oder