logo标签列表

IE11中第一个Fetch API调用被第二个取消了

javascriptinternet-explorer-11fetch-api
19

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

问题在于 - 我们有两个下拉列表，它们在页面第一次加载时从rest服务填充。该应用程序正在SSL下运行。当通过IE-11加载页面时，我遇到了一个IE-11 bug问题，其中第一个请求调用被第二个取消了 - 该错误在此处描述：

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中的其他部分使用。所以我在思考是否有一种抽象级别，可以使这两个下拉列表按顺序调用，并在下面调用上述代码呢？

5个回答
31
7

正如指出的那样，IE11不支持fetch，我在我的React应用程序中也遇到了这个问题。您可以选择使用Axios。

如果您正在迁移（或可以迁移），请查看我的答案以回答此帖子

基本上，检查这段代码：

Fetch JSON post请求示例：

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 post请求

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处理promise，你还可以将fetch（或axios或其他http库）包装在try/catch块中。

请注意，axios与流不兼容。fetch可以，但是需要使用polyfills才能在IE11、10和9上运行。以下链接提到了同样的事情。 https://create-react-app.dev/docs/supported-browsers-features/ - Abdulmoiz Ahmer
3
2

看起来你正在使用尚未被IE支持的Fetch API，这就是为什么你的应用在Chrome上可以工作的原因。

我建议你换成第三方库，比如Axios、superagent等...

有没有一种方法手工制作一个解决方案，因为它只影响两个下拉列表？ - Andy5
你可以仅更改这两个下拉菜单的库... 如果时间不够，稍后再更改所有其他地方。 - Felipe Skinner
请问您能否解释一下为什么加入setTimeout会强制它工作？ - Andy5
我一点头绪都没有。你有fetch API的任何polyfills吗？ - Felipe Skinner
1
create-react-app模板使用whatwg-fetch，这是fetch API的一个包装器，应该支持所有浏览器，但我遇到了同样的问题，在IE 11上根本无法工作。 - Mr.Java
显示剩余2条评论
1
3
欢迎来到 Stack Overflow！欢迎提供解决方案的链接，但请确保您的回答即使没有链接也是有用的：添加链接周围的上下文，这样其他用户就会知道它是什么以及为什么会有链接，然后引用链接页面中最相关的部分，以防目标页面不可用。如果答案仅仅是一个链接，可能会被删除。 - Samuel Liew
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接