第一個 Fetch API 調用在 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

正如所指出的，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

與 ReactJS 無關，但我希望對像我一樣登陸這里的其他人有用。

我發現Github fetch polyfill和TaylorHakes 的 Promise polyfill在我的 ASP.NET MVC Web 應用程序的上下文中很好且易於上手。 兩者均由https://ourcodeworld.com推薦

Answer 4

您似乎正在使用 IE 尚不支持的Fetch API 。 這就是您的應用在 Chrome 上運行的原因。

我建議你轉向 3rd 方庫，如 Axios、superagent 等......

Answer 5

IE 不提供對 fetch 使用的支持。 你需要使用一些 polyfill 來解決這個問題。 您可以使用http://github.github.io/fetch/ 。