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. ChiftKey
    IE11에서 정상동작하지 않는 분들

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

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

    그리고.. 호환성 보기로 테스트 하시는 사이트를 추가하시면 동작하지 않으니 주의하세요!
  2. Hyeon-Jun Ha
    완료
  3. incursio
    감사합니다
  4. 허공
    190509 감사합니다.
  5. paran29
    다운로드 받은 fetch.js 파일의 78줄에 Uncaught SyntaxError: Unexpected token export 에러가 있네요. 저 파일 안 넣고 cdn으로 해결했습니다.
  6. 발헤
    감사합니다. 완료
  7. 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 입니다.
        대화보기
        • Ashed GoodDevil
          제가 잘못이해한건가 이 영상만 거의 5번 넘게 되돌려보는중인데요,
          영상에서는 polyfill을 적용하는 방법이 fetch.js파일을 로드시키기만 하면 IE11에서도 fetch기능이 정상 작동할 것이라고 이해했는데 막상 IE11에서 실행해보면 fetch가 작동 안합니다.
          그래서 IE개발자 도구로 확인해보니 오류가 뜨네요.
          첫째는 'fetch이(가) 정의되지 않았습니다.'이고,
          둘째는 fetch.js (78,1) 구문오류가 나왔습니다.
          혹시 해결책 아시는분 도와주세요~ ㅠㅠ
        • JuicyFresh
          감사합니다.
        • hkang106
          최고입니다
          대화보기
          • 삼고잉
            polyfill 의 정의.. 감사합니다 ㅎㅎ
          • YUKI.N
            호환되라고 넣은 fetch.js 파일에서 조차 오류를 뿜어버리는 갓 ie11...
            ie 따위 그냥 포기하렵니다...
          • 이하빛
            fetch 파일 적용하고 콘솔에서 확인해보니

            export function Headers(headers) {
            this.map = {}

            여기 에러있다고 뜨는데 어떻게 수정해야할까요?;;
          • 봉봉봉
            IE11에서 에러나는 부분 고민했어는데 감사합니다.
          • 이승우
            IE11로 해서 에러가 떴는데요 혹시나 이런 에러가 뜨시면
            <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
            이것을 추가해서 사용하시면 될겁니다!
          • 이승우
            IE11로 아래의 문구가 뜨면서 안됩니당~

            SCRIPT5009: 'Promise'이(가) 정의되지 않았습니다.
            fetch.js (423,5)
          • egoing
            알려주셔서 고맙습니다. 반영했습니다 :)
            대화보기
            • d.v4n
              2018년 현재 fetch API 비교적 최신 기능이니다. 따라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 동작하지 않을 수 있습니다. polypill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있습니다. 지원되지 않는 브라우저에서 코드가 실행되면 polyfill이 과거의 방식으로 자동으로 동작해줍니다. 이번 시간에는 fetch API의 ployfill을 적용해봅니다.


              오타 부분 수정하여 올립니다. 하루 빨리 적용되길 바랍니다.

              2018년 현재 fetch API 비교적 최신 기능입니다. 따라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 동작하지 않을 수 있습니다. polyfill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있습니다. 지원되지 않는 브라우저에서 코드가 실행되면 polyfill이 과거의 방식으로 자동으로 동작해줍니다. 이번 시간에는 fetch API의 polyfill을 적용해봅니다.
            • 최동희
              fetch API가 위 방법으로 제대로 동작하지 않으면 최후에는 기존 방법이라도 써야 하니 여기 관련된 주소 적어둡니다. https://developer.mozilla.org......ted
            • 최동희
              가상머신 윈도우에서 Internet Explorer나 Edge 브라우저 버전에 따라 테스트해보고 싶으신 분은 https://developer.microsoft.com......ms/ 참고하세요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기