在Internet Explorer中提取? [英] Fetch in Internet Explorer?

问题描述

以下代码根本不适用于IE.

  fetch("{{{LINK TO API}}}"，{标头:{"Accept":"application/json"，"Content-Type":"application/json"}}).then(resp => resp.json()).then(function(json){//设置变量var Seller = json.sellers [Math.floor(Math.random()* Math.floor(json.sellers.length))]];//插入公司徽标companyLogo.src = json.logo_url;//插入卖家个人资料document.querySelectorAll("[数据销售商资料]").forEach(包装=> {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;});});  

该代码位于Webpack环境中，并与@ babel/preset-env以及@ babel/polyfill一起作为 entry进行输入:["@ babel/polyfill"，"./src/main.js]，.

已编译的代码: fetch("https://helpbox-by-avense.se/api/company/1/init-info"，{标题:{接受:"application/json"，"Content-类型:" 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})})

要使其在IE上运行，应该进行哪些更改?

解决方案

您需要额外的 fetch polyfill，Babel不会为您进行polyfill，也不会进行编译./p>

https://github.com/github/fetch

您也不会在 .babelrc 中定位任何浏览器，因此请将其更改为

  {预设":[["@ babel/preset-env"，{目标":{浏览器":[最后1个版本"，"ie> = 11"]，"node":"6.10"，"esmodules":是}}]]，插件":["@ babel/plugin-proposal-object-rest-spread"]} 

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?

解决方案

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"]
}

这篇关于在Internet Explorer中提取?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！