javascript - Fetch 与 AjaxCall

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() 方法，该方法也会返回一个 promise，并将其与另一个 then 调用链接起来。

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

返回内容内置如下

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

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

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