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

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

与 ReactJS 无关，但我希望对像我一样登陆这里的其他人有用。

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

Answer 2

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

如果您正在迁移（或可以迁移），请检查My answer 至this post

基本上，检查这个代码：

获取 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，您还可以将 fetch（或 axios 或您使用的任何 http 库）包装在 try/catch 块中以处理承诺。

Answer 3

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

Answer 4

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

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

Answer 5

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

我建议你迁移到第三方库，例如 Axios、superagent 等...