Fetch 与 AjaxCall

Question

典型的AJAX和FetchAPI有什么区别？

考虑这种情况：

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 对 return 的调用：

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

为什么它 return 不同？

有没有办法让 fetch 变成 return 与典型的 AJAX 调用相同的东西？

Answer 1

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

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

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

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

Answer 2

Fetch API 内置了针对不同数据类型的方法。
对于普通的 text/html 你会使用 text() 方法，这也是 returns 一个承诺，并将它与另一个链接起来然后调用。

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

返回内容built-ins如下

clone() - 创建响应的克隆 object.
error() - Returns一个与网络错误关联的新响应 object。
redirect() - 创建具有不同 URL 的新响应。
arrayBuffer() - Returns 使用 ArrayBuffer 解析的承诺。
blob() - Returns 使用 Blob 解决的承诺。
formData() - Returns 使用 FormData 解析的承诺 object.
json() - Returns 以 JSON object.
text() - Returns 使用 USVString（文本）解析的承诺。

它也允许你发送东西到服务器，或者添加你自己的headers等等

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

Fetch 与 AjaxCall

Fetch vs. AjaxCall

javascript

ajax

fetch-api