WEB3 - Ajax

fetch API polyfill

수업소개

2018년 현재 fetch API는 비교적 최신 기능입니다. 따라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 동작하지 않을 수 있습니다. polypill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있습니다. 지원되지 않는 브라우저에서 코드가 실행되면 polyfill 이 활성화되서 대신 동작하게 됩니다. 이번 시간에는 fetch API의 ployfill을 적용해봅니다. 

 

 

 

강의

 

수업에서 사용하는 polyfill 바로가기

 

소스코드

변경사항

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../fetch.js"></script>
</head>
<body>
  <script>
    var result = fetch('https://api.github.com')
    result.then(function(response) {
      console.log('response', response)
      console.log('header', response.headers.get('Content-Type'))
      return response.text()
    }).then(function(text) {
      console.log('got text', text)
    }).catch(function(ex) {
      console.log('failed', ex)
    })
  </script>
</body>
</html>

 

댓글

댓글 본문
  1. 서우
    221017
  2. 당당
    2022.10.02
  3. melll
    2022.03.08
  4. pmxsg
    2022.02.02
  5. 아까그애
    2022-01-21 완료
  6. Koma Doodugi
    2021.10.27 완료
  7. 행달
    21.10.21
    ChiftKey님 답글 참조해서 완료했습니다.
    감사!
  8. shg7271
    210805
  9. labis98
    20210719 completed!
  10. 별거
    2021.04.30 최신버젼에선 바꼈더라고요. 작동 안하던데요..
  11. 김우중
    감사합니다
  12. chimhyangmoo
    2021.02.09
  13. jeisyoon
    2021.02.01 수강
  14. hanel_
    21.1.29 ie에서 테스트했으나 구동이 안됨.. ie가낡아서 그런가
  15. 고니스타크
    2021년 2일차
    호환용 pollyfill 다운받아서 사용
  16. 주니어개발자
    [ 기본 소양 ]
    최신 기술을 사용할 때는 데이터를 기반으로 판단한다
    브라우저 호환성 문제에 대해 고려해야 할 때
    통계를 통해서 판단할 수 있다.

    https://caniuse.com/
    어떤 특정 기능이 어떤 브라우저에서 현재 지원되는가를 확인할 수 있다

    현재 ajax 통신을 위한 Fetch API의 점유율 (2021/01/01 기준)
    Global 95.61% + 0.05% = 95.66%

    MS 조차 자사의 전통적인 브라우저인 IE 11(최신버전임에도)를 쓰지말라 권고하고
    Edge를 미는데에는 이유가 있다.

    하지만 개발자는 클라이언트의 요구사항에 따라
    여러 옵션을 마련해줘야 하는 것이 현실이다.

    [ 검색어 ]
    fetch api polyfill


    [ Polyfill ]
    Web은 어느 한 기업이 만드는 것이 아니라 공공재이기 때문에
    여러 위원회가 꾸려져서 "미래엔 이런 기술이 필요해!" 라고 박터지게 싸워서
    거기서 결정된 규약을 토대로 각각의 브라우저 업체들이 구현하게 된다.

    다시 말해 어떤 기능이 있을때 그 기능을 모든 브라우저들이 지원하지 않을 수도 있다는 것
    그런 경우에 과거의 브라우저를 쓰는 유저들도 그 기능을 사용할 수 있도록 해주는 것이
    Polyfill 이다.
  17. 생활둘기
    2020 12 22
  18. kkn1125
    20.12.20 완료~!
  19. Yeonny
    2020.11.12 done.
  20. Sunny
    2020.11.03.TUE.
  21. 웹짱
    2020.10.26 버전이 낮은 브라우저도 최신 api 사용하려고 할 때 사용
  22. 청출어람
    fetch.js 추가 후 파이어폭스에서 SyntaxError: import declarations may only appear at top level of a module 에러나는 경우 <script type="module" src="fetch/fetch.js">과 같이 type 속성에 module을 주면 됩니다.
  23. 허우룩
    2020.09.06
  24. pupu
    완료
  25. pupu
    2020/07/20 완료
  26. Mauv
    앞에 강의 보니까 인터넷익스플로러에서 fetch가 작동하지 않는다고 힘들어하시는 분들이 계시더라구요. 그런 분들이 이 강의를 먼저 보셨다면 왜 그런지 이해가 되셨을 텐데 안타깝네요. 만약에 이 글을 보시게 되면 fetch에 강의를 같이 넣으셔도 좋을 것 같습니다.
  27. 김혜린
    6월 25일 완료!
  28. hpyseun
    05/22/2020 완료 감사합니다
  29. OneJae EE
    20.04.15 수 / 37세 비전공자 / 완료
  30. ㅇㄴㄹ
    이번편은 머리 구석에만 넣어두고 나중에 필요하면 꺼내면 되겠네요
  31. Always
    https://github.com......0.4
    영상에서 나오는 파일주소입니당 다들 참고하셔용 ㅎ
  32. 현수
    https://github.com......lls
    css polyfill 입니다
    구글에 cross browser polyfill github쳐도 나옵니당
  33. 1d1c
    완료
  34. ㅇㅇ
    css 도 polyfill 처럼 지원이 안되는 브라우저에서도 기능이 실행될 수 있도록하는 도구가 있을까요?
  35. eddylee123456
    완료
  36. 이재현
    감사해요 ㅠ.ㅠ
    대화보기
    • 스티븐잡숴
      완료
    • 샬롬
      완료
    • 박창신
      완료
    • 굼벵이
      완료
    • 쑤우
      수강완료. 감사합니다.
    • ChiftKey
      IE11에서 정상동작하지 않는 분들

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

      위 CDN코드 추가해주시면 정상동작합니다!

      그리고.. 호환성 보기로 테스트 하시는 사이트를 추가하시면 동작하지 않으니 주의하세요!
    • Hyeon-Jun Ha
      완료
    • incursio
      감사합니다
    • 허공
      190509 감사합니다.
    • paran29
      다운로드 받은 fetch.js 파일의 78줄에 Uncaught SyntaxError: Unexpected token export 에러가 있네요. 저 파일 안 넣고 cdn으로 해결했습니다.
    • 발헤
      감사합니다. 완료
    • Hyeonu Gwon
      ie11 에서 제대로 동작 안 됐는데, 감사합니다. ㅎㅎ
      잘은 모르겠지만, 자바스크립트 버전이 달라서 발생하는 문제로 보입니다.
      fetch.js 이 파일에 export 라는 키워드(?)가 들어가는데, ES6(ECMA Script 2015 하모니) 에서 도입된 문법으로, IE11 에서는 ES6 버전 문법이 적용이 제대로 안 되는 것 같습니다.
      대화보기
      • yo!nalaolla
        저도 ie11에서 적용안됐는데 Ashed GoodDevil님 말씀해주신 cdn 붙여넣으니 잘 동작되네요.
        감사합니다~!
        대화보기
        • Ashed GoodDevil
          자문자답입니다만;;
          다음 링크는 해당 이슈 관련 페이지이구요 https://github.com......656
          영어와 지식이 부족해서 자세한 내용은 이해하기 어렵...;
          해결책은
          fetch.js파일을 직접 로드하는 방법을 <script src="fetch/fetch.js"></script>
          cdn을 통해 다음 두줄의 코드로 로드하시면 해결됩니다.
          <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>

          P.S: 테스트환경은 IE 11.472.171340.0 입니다.
          대화보기
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기