Internet ExplorerのためのマルチフィックスJavaScriptフェッチ機能

私は私の個人的なプロジェクトのfetch APIを使用して大好きです.Babelを使用して、プロジェクトに反応しているとき、ES 6構文は構築された時間に自動的に移されて、ポリ詰めになります.しかし、我々がBabelまたはWebpackを使わない単純なプロジェクトにfetch APIを使いたいとき、我々がする必要があるもの?我々は、手動でポリフィルをする必要があり、追加のポリフィルは、ウェブサイトのパフォーマンスに影響を与えないことを確認します.

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

なぜ“フェッチ”を使用する？

fetch APIが導入される前に、XMLHttpRequestを使用しているHTTP要求を作成することは複雑でした、そして、構文はきれいで簡単でありませんでした.

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://path/to/api.endpoint");

xhr.send();

xhr.onload = function() {
  // Handle response
};

xhr.onprogress = function(event) {
  // Handle progress
};

xhr.onerror = function() {
  // Handle error
};

それは、複数のクラスメソッドとイベントハンドラに分離された多くのboilerplateコードです.
また、JavaScriptプラグインとJQuery(Ajax)機能もあり、XMLHttpRequest前後のラッパーとして機能し、シンタックスを向上させました.しかし、ES 6 fetch APIまで公式APIの改善はありませんでした.

フェッチAPI

フェッチAPIは、HTTPの要求をはるかに簡単かつ簡単なJavaScriptの構文を使用してデータを送受信し、任意のイベントをJavaScriptの約束を使用して処理することができます.

fetch("https://path/to/api.endpoint")
  .then(handleResponse)
  .catch(handleFallback);

十分に簡単に見える、右?
この改良された構文は、全体の機能性をよりアクセス可能で、開発者フレンドリーにしました.fetchブラウザのサポートは、快適な95 %で座っていますが、我々は、さらに多くのブラウザーがそれをサポートするように簡単にポリフィルすることができます.

Internet Explorer用のポリフィリングフェッチ

すべてのブラウザ(それをサポートしているそれらを含む)のための負荷をプロジェクトにポリフィルを追加したくない.それが必要であるならば、余分なJavaScriptがロードされるように、ダイナミックにポリフィルをロードしましょう.
Internet Explorerで動作するfetchには、2つのポリフィリングを追加する必要があります.

はポリフィルを約束します-覚えてください、fetchは約束

を使います

取得ポリフィル

// Detect if user is on IE browser
 var isIE = !!window.MSInputMethodContext && !!document.documentMode;

    if (isIE) {
       // Create Promise polyfill script tag
        var promiseScript = document.createElement("script");
        promiseScript.type = "text/javascript";
        promiseScript.src =
            "https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js";

      // Create Fetch polyfill script tag
        var fetchScript = document.createElement("script");
        fetchScript.type = "text/javascript";
        fetchScript.src =
            "https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js";

      // Add polyfills to head element
        document.head.appendChild(promiseScript);
        document.head.appendChild(fetchScript);

      // Wait for the polyfills to load and run the function. 
      // We could have done this differently, 
      // but I've found it to work well for my use-cases
        setTimeout(function () {
            window
                .fetch("https://path/to/api.endpoint")
                .then(handleResponse)
                .catch(handleErrors);
        }, 1000);
    } else {
      // If fetch is supported, just run the fetch function
        fetch("https://path/to/api.endpoint")
                .then(handleResponse)
                .catch(handleErrors);
    }

そしてそれです.ユーザーがInternet Explorerを使用している場合、fetch機能はグローバルwindowオブジェクトに追加され、window.fetch()として使用されます.

結論

私はfetchを使用して私のpersonal websiteでdevから記事をロードするには、このメソッドを使用して、それは期待通りに動作します.これは本当に実装するのは簡単だったと私は最終的な結果に満足していた.彼らが必要でないならば、私はポリフィルを積んでいないこともうれしかったです.
注意:また、私のコードを改善して、setTimeout関数に代入する方法についてのコメントを残してください.また、コードのこの部分は、ポリフィルが利用可能になるまで待ちます.
これらの商品はコーヒーによって製造されている.それで、あなたが私の仕事を楽しんで、それが役に立つとわかるならば、私にコーヒーを買うことを考えてください!私は本当に感謝します.

このポストを読む時間を割いてくれてありがとう.あなたがこれを見つけたならば、それを与えてください❤️ or 🦄, 共有とコメント.