trolkura trolkura - 4 months ago 23
Ajax Question

Fetch vs. AjaxCall

What is the difference between typical AJAX and Fetch API?

Consider this scenario:

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


This is what the
fetch
call returns:

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


Why does it return different things?

Is there a way for
fetch
to return the same thing as a typical AJAX call?

Answer

The Fetch API has built in methods for different datatypes.
For just regular text/html you'd use the text() method, which returns a promise as well, and chain it with another then call.

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

The built-ins for the returned content is as follows

  • clone() - Creates a clone of a Response object.
  • error() - Returns a new Response object associated with a network error.
  • redirect() - Creates a new response with a different URL.
  • arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
  • blob() - Returns a promise that resolves with a Blob.
  • formData() - Returns a promise that resolves with a FormData object.
  • json() - Returns a promise that resolves with a JSON object.
  • text() - Returns a promise that resolves with a USVString (text).

It also allows you to send things to the server, or add your own headers 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);
});
Comments