πŸ’Š fetch λž€ ?

fetchκ°€ μ„œλ²„μ— μš”μ²­ ν•œλ‹€.

function callbackme() {
  console.log('response end'); 
}
fetch ('type').then(callbackme);
console.log(1);
console.log(2); 

// λΉ„λ™κΈ°μ μœΌλ‘œ λ˜μ–΄μ„œ fetch('type')으둜 μš”μ²­μ„ 보내면 then은 결과값을 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆ λ‹€μŒ ν•¨μˆ˜λ₯Ό 
// λ¨Όμ € μ‹€ν–‰μ‹œμΌœμ„œ console 창에 μžˆλŠ” 1, 2 κ°€ λ°œμƒ 된 후에 κ²°κ³Ό 값이 λ‚˜μ˜€λ©΄ 
// console 에 1, 2, 'response end'κ°€ λ°œμƒν•©λ‹ˆλ‹€.


type = > html, css, javascript 파일 

πŸ“› 객체화 μ‹œν‚€κΈ° 집쀑!!

    μœ„μ—μ„œ 
        function callbackme () {                        callbackme = function() {
          console.log('response end');        ===           console.log('response end');
        }                                                    }

    이 λ‘κ°œλŠ” 같은 κ²ƒμž…λ‹ˆλ‹€.

    fetch('html').then(function(response){   // response μ—λŠ” Responce {객체} κ°€ λ“€μ–΄μžˆλ‹€. 
      console.log('response end')            // μ•ˆμ—λŠ” status : 200 λ„μžˆλ‹€. 이것은 μ—°κ²° μ„±κ³΅μ΄λΌλŠ” μ˜λ―Έμž…λ‹ˆλ‹€. 404λŠ” μ—°κ²°μ‹€νŒ¨!!
      if (response.status == '404'){
        alert('Not found')
      }
    });

πŸ“Ί λ¦¬νŒ©ν† λ§ ν•¨μˆ˜ν™”


    <li><a onclick="fetchLoad('html')">HTML</a></li>
    <li><a onclick="fetchLoad('css')">CSS</a></li>
    <li><a onclick="fetchLoad('javascript')">Javascript</a></li>


    function fetchLoad(val) {
      fetch(val).then(function(response){  // ν•¨μˆ˜μ— 이름이 μ—†μ„λ•ŒλŠ” 읡λͺ…ν•¨μˆ˜
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      })
    }