Internet Explorer용 JavaScript 가져오기 기능을 폴리필하는 방법

저는 개인 프로젝트에 fetch API를 사용하는 것을 좋아합니다. Babel을 사용하고 React 프로젝트에서 작업할 때 빌드 시간에 ES6 구문이 자동으로 변환되고 폴리필됩니다. 그러나 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
};

예, 그것은 여러 클래스 메서드와 이벤트 핸들러로 분리된 많은 상용구 코드입니다.

또한 단순화하고 구문을 개선하기 위해 래퍼 역할을 하는 일부 JavaScript 플러그인 및 jQuery(ajax) 함수XMLHttpRequest가 있었지만 ES6fetch API까지는 공식적인 API 개선이 없었습니다.

가져오기 API

Fetch API를 사용하면 훨씬 간단하고 간단한 JavaScript 구문을 사용하여 HTTP 요청을 만들어 데이터를 보내고 받고 JavaScript 약속을 사용하여 모든 이벤트를 처리할 수 있습니다.

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

충분히 간단해 보이죠?

이 개선된 구문은 전체 기능을 보다 쉽게 ​​액세스하고 개발자에게 친숙하게 만들었습니다. fetch 브라우저 지원이 95%에 불과하지만 더 많은 브라우저에서 지원하도록 쉽게 폴리필할 수 있습니다.

Internet Explorer용 폴리필링 가져오기

프로젝트에 polyfill을 추가하여 모든 브라우저(기본적으로 가져오기를 지원하는 브라우저 포함)에 대해 로드하는 것을 원하지 않습니다. 필요한 경우에만 추가 JavaScript가 로드되도록 polyfill을 동적으로 로드해 보겠습니다.
fetch가 Internet Explorer에서 작동하려면 두 개의 폴리필을 추가해야 합니다.

Promise polyfill - 기억하십시오. fetch는 약속

을 사용합니다.

polyfill 가져오기

// 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 기능을 위해 코드를 개선할 수 있는 방법에 대한 의견을 자유롭게 남겨주시고 코드의 이 부분이 polyfill이 사용 가능해질 때까지 기다리도록 하십시오.


이 기사는 커피에 의해 연료가 공급됩니다. 그러니 내 작업이 마음에 들고 도움이 된다면 커피 한 잔 사주세요! 정말 감사하겠습니다.



시간을 내어 이 게시물을 읽어주셔서 감사합니다. 이 정보가 유용했다면 ❤️ 또는 🦄를 표시하고 공유하고 댓글을 달아주세요.