web-dev-qa-db-ja.com

React IE11でフェッチが機能しない

Chromeでは期待どおりに動作するが、IE-11では失敗するReactJSアプリケーションがあります。

問題はこれです-ページが最初にロードされたときに残りのサービスから取り込まれる2つのドロップダウンリストがあります。アプリケーションはSSLで実行されています。 IE-11を介してページがロードされると、最初のリクエストコールが2番目によってキャンセルされる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。で他の人が使用します。2つのドロップダウンリストが順番に呼び出すことができる抽象化レベルがあるために離れている場合、私は考えています次に、上記を下に呼び出しますか？

javascriptreactjsfetch-api
15
Andy5

isomorphic-fetchサポートされていないブラウザで動作させるためのポリフィルとして。

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

21
Fez Vrasta

IEでまだサポートされていない Fetch API を使用しているようです。そのため、アプリはChromeで動作します。

Axios、スーパーエージェントなどのサードパーティのライブラリに移行することをお勧めします...

2
Felipe Skinner

指摘したように、フェッチはIE11でサポートされていません。また、Reactアプリでこの問題が発生しました。代わりに Axios を使用できます。

移行する（または移行できる）場合は、 My answer to 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
}

したがって、完全なアプリがリクエスト関数を使用している場合、その関数のライブラリを変更するだけで、同じオブジェクトまたは値を返す限り害はありません。 try/catchブロックでフェッチ（またはaxiosまたは使用するhttpライブラリ）をラップして、async/awaitを使用する場合のプロミスを処理することもできます。

2
c-chavez

IEは、フェッチを使用するためのサポートを提供しません。この問題を解決するには、ポリフィルを使用する必要があります。 http://github.github.io/fetch/ を使用できます。

0
Leandro Budau

ReactJSとは無関係ですが、私がやったようにここに上陸した他の人たちに役立つことを願っています。

Github fetch polyfill および TaylorHakesのPromise polyfill を見つけました。ASP.NETMVC Webアプリケーションのコンテキストで使いやすく、簡単に始められます。両方が https://ourcodeworld.com によって推奨されました

0
OutstandingBill