Immersive - fetch API

chltndid724Β·2019λ…„ 8μ›” 3일
0

immersive

λͺ©λ‘ 보기
9/22

πŸ’Š 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;
        })
      })
    }
      
profile
νž˜λ“€λ• λΈ”λ‘œκ·Έ ν•˜λ‚˜λ” 적자!!![ Suyang ]

0개의 λŒ“κΈ€