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-fetchpolyfill即可在不受支持的浏览器上运行.

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

Answer 2

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

Answer 3

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

我建议你转向第三方库，例如 Axios、superagent 等......