React Fetch在IE11中不起作用

Question

我有一个ReactJS应用程序在Chrome中按预期工作，但在IE-11中失败。

问题是这样的 - 我们有两个下拉列表，这些列表是在首次加载页面时从其他服务填充的。 该应用程序在SSL下运行。 当页面通过IE-11加载时，我得到一个IE-11错误问题，其中第一个请求调用被第二个请求调用取消 - 这里描述了错误：

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1282036/

所以，我只是向社区询问IE-11是否有解决方法，或者是否依次实现我的代码，如果第一个完成则第二个被调用：

export let getMainData = (dtType, url)=> {
return dispatch=>{
       dispatch(sendGet(dtType));
       const action = (async(url) => {
              const response = await fetch(url);
                 let data = await response.json();
                    dispatch(receiveGet(dtType,data));
     });
   action(url);
 };
 };

上面的代码是公共代码，React App中的其他人使用它。 所以我想的是，如果有一个抽象级别，两个下拉列表可以顺序调用，然后调用上面的下面，也许？

Answer 1

只需将isomorphic-fetch包含为polyfill，即可在不受支持的浏览器上运行。

https://github.com/matthew-andrews/isomorphic-fetch

Answer 2

您似乎正在使用IE尚不支持的Fetch API 。 这就是您的应用在Chrome上运行的原因。

我建议你转到第三方lib，比如Axios，superagent等......

Answer 3

正如所指出的，IE11不支持fetch，我的React应用程序也遇到了这个问题。 或者，您也可以使用Axios 。

如果您正在迁移（或可以迁移），请选中我 对此帖子的 回答

基本上，检查以下代码：

获取JSON帖子请求

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON发布请求

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

我总是有应用程序使用的主要请求功能，所以如果你使用fetch或axios并不重要。 例如在'your-common.js'中：

async function request(url, method, objectData){
    // use axios or fetch or isomorphic-fetch
}

因此，如果您的完整应用程序正在使用您的请求函数，您只需更改该函数中的库，只要您返回相同的对象或值，就不会造成任何损害。 如果使用async / await，您还可以在try / catch块中包装fetch（或axios或您使用的任何http库）来处理promise。

Answer 4

IE不提供支持使用的支持。 您需要使用一些polyfill来解决此问题。 您可以使用http://github.github.io/fetch/ 。

Answer 5

与ReactJS无关，但我希望对我这里的其他人有用。

我发现Github提取 polyfill和TaylorHakes的Promise polyfill很好，很容易在我的ASP.NET MVC Web应用程序的上下文中开始。 两者都是https://ourcodeworld.com推荐的