Fetch in Internet Explorer?

问题

Following code does not work on IE at all.

fetch("{{{LINK TO API}}}", {
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
    }
})
    .then(resp => resp.json())
    .then(function(json) {
        // SET VARIABLES
        var seller = json.sellers[Math.floor(Math.random() * Math.floor(json.sellers.length))];
        
        // INSERT COMPANY LOGO
        companyLogo.src = json.logo_url;

        // INSERT SELLER PROFILES
        document.querySelectorAll("[data-seller-profile]").forEach(wrapper => {
            var innerHTML = "";
            innerHTML += "<img class='hbba-profile-img' src='" + seller.profile_image + "'>";
            innerHTML += "<div class='hbba-desc-wrapper'>";
            innerHTML += "<span class='hbba-desc-name'>" + seller.name + "</span>";
            innerHTML += "<span class='hbba-desc-title'>" + seller.job_title + "</span>";
            innerHTML += "</div>";
            innerHTML += "<div class='hbba-is-active'></div>";
            wrapper.innerHTML = innerHTML;
        });
    });

The code is in a Webpack environment and gets complied with @babel/preset-env, as well as @babel/polyfill as entry: ["@babel/polyfill", "./src/main.js"],.

Compiled code: fetch("https://helpbox-by-avense.se/api/company/1/init-info",{headers:{Accept:"application/json","Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){var n=t.sellers[Math.floor(Math.random()*Math.floor(t.sellers.length))];u.src=t.logo_url,document.querySelectorAll("[data-seller-profile]").forEach(function(t){var e="";e+="<img class='hbba-profile-img' src='"+n.profile_image+"'>",e+="<div class='hbba-desc-wrapper'>",e+="<span class='hbba-desc-name'>"+n.name+"</span>",e+="<span class='hbba-desc-title'>"+n.job_title+"</span>",e+="</div>",e+="<div class='hbba-is-active'></div>",t.innerHTML=e})})

What should be change in order for it to work on IE?

回答1:

You need an additional fetch polyfill, Babel won't polyfill this for you, and it won't transpile it either.

https://github.com/github/fetch

Also you don't target any browser in your .babelrc, so change it to

{
  "presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": [ "last 1 version", "ie >= 11" ],
        "node": "6.10",
        "esmodules": true
      }
    }]
  ],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

来源：https://stackoverflow.com/questions/56137702/fetch-in-internet-explorer

标签

javascript

fetch

es6-promise

babeljs