Question

典型的AJAX和Fetch API有什么区别？

考虑这种情况：

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

这是fetch调用返回的内容：

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

为什么它会返回不同的东西？

fetch是否有办法返回与典型AJAX调用相同的东西？

Answer 1

Fetch API内置了不同数据类型的方法对于常规文本/ html，您可以使用text()方法，该方法也会返回一个承诺，然后将其链接到另一个，然后调用。

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

返回内容的内置插件如下

clone（） - 创建Response对象的克隆。
error（） - 返回一个与网络错误关联的新Response对象。
redirect（） - 使用不同的URL创建新响应。
arrayBuffer（） - 返回使用ArrayBuffer解析的promise。
blob（） - 返回使用Blob解析的promise。
formData（） - 返回使用FormData对象解析的promise。
json（） - 返回使用JSON对象解析的promise。
text（） - 返回使用USVString（文本）解析的promise。

它还允许您将内容发送到服务器，或添加自己的标题等。

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

您的ajaxCall正在从XMLHttpRequest对象返回responseText。它正在过滤掉它。

您需要在获取代码中读取响应文本。

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

您还可以使用x.json()或x.blob()

Fetch vs. AjaxCall

2 个答案: