Immersive - fetch API

💊 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;
        })
      })
    }