fetch example

fetch("user1.json")
.then(response=>{
  if(!response.ok){ // 404에러 처리
    throw new Error(response.statusText);    
  }
  return response.text();  // 텍스트형식으로 다운로드
})
.then(val=>{
  console.log(val);
})
.catch(er=>{
  console.log(er);
})

4xx, 5xx 에러는 fullfilled되기때문애 response 프로퍼티로 처리해야 한다.

fetch('https://no-such-server.blabla') // 서버연결실패
.then((reponse)=>{
  if(!reponse.ok){
    throw new Error("404");    
  }
})
.catch(er=> console.log(er))

서버연결실패는 catch함수에서 처리해야 한다.

fetch("user.json")
.then(response=>{
  if(!response.ok){
    throw new Error(response.statusText);    
  }
  return response.json();  // json형식으로 다운로드, 객체생성 
})
.then(val=>{
  console.log(val);
})
.catch(er=>{
  console.log(er);
})

정상접근이면 데이터를 promise체이닝으로 다운로드한다.

fetch('https://api.github.com/users/iliakan')
.then(reponse=>{
  if(!reponse.ok){
    throw new Error(reponse.status);    
  }
  return reponse.json();
})
.then(githubUser=>{
  // console.log(githubUser.name);
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  document.body.append(img);
  setTimeout(() => {
    img.remove();
  }, 3000);
})
.catch(er=>{
  console.log(er);
})

reponse.json();으로 json파일을 다운로드하여 객체화하여 반환한다.