[8] AJAX - fetch API polyfill

1. can i use에서 호환성 확인하기

https://caniuse.com/?search=fetch

2. polyfill

polypill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있다. 지원되지 않는 브라우저에서 코드가 실행되면 polyfill이 활성화되어서 대신 동작하게 된다.

https://github.com/github/fetch

위 파일의 fetch.js를 적용하면 된다.

<script type="module" src="/fetch.js"></script>

3. 오류...?

근데 나는 생활코딩 인강을 따라서 하고 있었는데...
위 github/fetch의 fetch.js를 적용해 봐도 IE에서 실행이 안 된다... 😰

검색한 결과, CDN을 사용하기로 했지만... CDN JS 에서 갖고 온 코드로도 동작이 안 되는 것이다... 😭

따라서 검색을 통해 방법을 찾았다.

- 해결 방법 01

<script src=https://cdn.jsdelivr.net/npm/promise-polyfill@8.1/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js></script>

- 해결 방법 02

<script src=https://cdn.jsdelivr.net/npm/promise-polyfill@8.1/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js></script>

- 참고 01

polyfill.min.js 를 적용하지 않으면 해당 오류가 뜬다.

해결 방법과 Promise에 대한 것은 goddaehee.tistory를 참고했다.

- 참고 02

내가 사용한 버전의 IE에서는 `` 백틱 적용이 안 됐다.
따라서 코드를 아래와 같이 수정했다.

// let tag = `<li><a href="#!${item}">${item}</a></li>`
let tag = '<li><a href="#!'+item+'"token operator">+item+'\')">'+item+'</a></li>';

// document.querySelector('article').innerHTML = `${file}라는 파일이 존재하지 않습니다.`;
document.querySelector('article').innerHTML = file + '라는 파일이 존재하지 않습니다.';

3. IE에서도 실행 확인!! 🤗

오류 해결을 통해 fetch API 와 polyfill 을 사용하여,
호환이 되지 않던 IE 버전에서도 제대로 실행되는 것을 확인했다.