Fetch 与 AjaxCall

Posted 2023-02-27

【中文标题】Fetch 与 AjaxCall

【英文标题】：Fetch vs. AjaxCall

【发布时间】：2016-11-14 22:06:23

【问题描述】：

典型的 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 调用相同的内容？

【问题讨论】：

What is the difference between the Fetch API and XMLHttpRequest?的可能重复

仅供参考：IE11 不支持 Fetch（尽管有一个 Polyfill：github.com/github/fetch）

【参考方案1】：

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

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

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

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

【讨论】：

输出未定义

@trolkura 你测试它的 URL 是什么？ www.testSite 不是一个有效的域，但可能是一个有效的目录或文件名，很可能在您测试它的任何地方都不存在。

啊抱歉，本来打算用text()

这里的评论太晚了，但是那些响应方法（text（），blob（），json（））虽然返回另一个Promise，这可能会让一些人感到困惑。

【参考方案2】：

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

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

返回内容的内建如下

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

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

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 才被添加为aborted 的选项（为什么fetch 最初发布时没有中止的方式我无法理解）。 Ajax 可以更容易地中止。

无法中止Promise。这也许是初始实现的限制。我想知道他们是如何解决这个问题的。