我在使用 Internet Explorer 11 的 Fetch API 时遇到问题答案

【问题标题】：I have a problem with the Fetch API using Internet Explorer 11我在使用 Internet Explorer 11 的 Fetch API 时遇到问题
【发布时间】：2018-09-28 09:40:31
【问题描述】：

我对这段代码有一些问题。我将使用此代码而不是 polyfill。该代码可以使用 Firefox、Chrome、Opera 和 MS Edge，但 Internet Explorer 11 没有响应。有人可以给我一个疑难解答提示吗？

function fetchFile(file,method,params,target) {

const controller = new AbortController();
const signal = controller.signal;

setTimeout(controller.abort.bind(controller), 5000); 

var options = { method: method, signal }; 

if (params != 'default') {

switch (method) { case 'GET':  file = file+'?'+params; break;

                  case 'POST': var data = params; break; default: data = 'data'; break;}

} 

switch (method) { case 'POST': options.body = data; options.headers = {"Content-Type": "application/x-www-form-urlencoded"}; break;}

fetch(file, options).then(function (response)  {

  return response.text();

}).then(function (data)  {

  document.getElementById(target).innerHTML = data;  

  switch (data) {case '': loadXhttp(file,method,params,target); break;} 
  
  
}).catch(function (data) {


switch (error.name) {

   case 'AbortError': var error = 'Abort Error'; break; 

   default: error = 'Other Error'; break;} 

   document.write(error);

});

}

function loadXhttp(file,method,params,target) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(target).innerHTML = this.responseText;
    }
  };
  xhttp.open(method, file, true);
  
  switch (method) {case 'GET': var send = null; break;
                  case 'POST': xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				               send = params; break;} 
  
  xhttp.send(send);
}

谢谢。

最好的问候，马库斯

【问题讨论】：

标签： javascript fetch

【解决方案1】：

我建议您查看isomorphic fetch

根据要求，这是您的使用方法

安装isomorphic-fetch 和es6-promise 软件包

npm install --save isomorphic-fetch es6-promise

安装软件包后，require 在您的应用程序中使用它们

require('es6-promise').polyfill()
require('isomorphic-fetch')

这应该可以让你正常使用fetch

fetch(url).then(handleResponse).catch(handleError)

【讨论】：

最好有一个示例代码来解决这个问题。也可以与其他答案结合使用。

【解决方案2】：

我想在这里添加一些内容，因为我在 IE11 中使用 fetch API 遇到了同样的问题。就我而言，我在 vanilla JS 中使用 fetch 而不与任何框架结合使用。

我已经有一个来自 here 的 polyfill。只需下载 fetch.umd.js 文件并将其放置在 script 标签中即可。然后我得到了未定义的 Promise 错误。所以我也必须有一个来自here 的 Promise polyfill。

在我加载其他脚本之前，我在布局文件中的一个简单脚本标记中使用了它们，因为我正在使用 Visual Studio，Promise polyfill 也有 cdn:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

我希望它可以帮助寻找解决方案的人，而无需像上面示例中提到的那样安装它们。

【讨论】：

【解决方案3】：

我使用了同构提取，它在所有浏览器中都可以正常工作

require('es6-promise').polyfill();
require('isomorphic-fetch');

【讨论】：