괜찮아 잘하고있어 힘내

9. fetch API polyfill 본문

웹 개발/ajax

9. fetch API polyfill

코오올라 2020. 12. 10. 15:59

XMLHttpRequest 와 같은 비슷한 api가 존재한다. 하지만 새로운 Fetch API가 좀더 강력하고 유연한 조작이 가능하다.

 

fetch API 는 최슨 브라우저에서는 사용가능하지만 오래된 브라우저에서는 사용할 수 없다.

 

can i use 라고 구글에 검색해보자

 

fetch API 는 XMLHttpRequest를 대체하는 근대적인 방법이다. 

 

[fetch api polyfill]

 

과거 브라우저를 사용하는 사람들을 지원하기 위한 방법이 polyfill 이다.

 

github.com/github/fetch

 

github/fetch

A window.fetch JavaScript polyfill. Contribute to github/fetch development by creating an account on GitHub.

github.com

 

압축파일을 다운받고 index.html이 있는 폴더에 풀어준다.

fetch-master폴더가 생기는데 그안에 fetch-master이 또있고 그안에 fetch.js가 있다.

이 경로 그대로 써도 상관 없는데 나는 바꿔줬다.

불필요한 경로와 경로를 바꿨다.

원래는 fetch-master  ->  fetch-master  -> fetch.js

이런식인데

fetch -> fetch.js 이렇게 바꿨다.

 

 

 

이제 index.html 파일에

<script>태그의 src 안에 변경한 주소대로 적어준다.

 

크롬에 들어가 f12를 누르고 network 탭을 눌러 확인하면

fetch.js가 다운로드 되고 상태 200으로 문제가 없어보인다.

 

그런데 explorer에서는 

fetch가 정의되지 않았다고 오류가 발생한다.

 

index.html에 추가로

 

<script src="https://polyfill.io/v3/polyfill.js?features=fetch"></script>

 

를 추가해주면 explorer에서도 fetch가 정상 작동된다.

 

'웹 개발 > ajax' 카테고리의 다른 글

8.2 글목록  (0) 2020.12.09
8.1 글목록  (0) 2020.12.09
7.2 초기 페이지  (0) 2020.12.09
7.1 초기 페이지  (0) 2020.12.09
6.2 리팩토링 함수화  (0) 2020.12.09
Comments