提取与Ajax调用

Question

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 1

Your ajaxCall is returning the responseText from the XMLHttpRequest object. It is filtering it out.

You need to read the response Text in the fetch code.

fetch('/foo/').then( x => return x.text() } ).then(text => console.log(text))

You can also use x.json() or x.blob()