[프로그래머스 데브코스_FE] TIL Day-15

❗❗  데브코스 15일차 (08.20)

저번시간에 비동기 학습에 이어서 오늘은 fech api를 활용한 수업을 진행했다.

fech api로 데이터 정보를 받아와서 필요한 요구사항에 맞게 화면에 랜더링을 구현하였다.

 

✅ fetch api란

• 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API
• XMLHTTPRequest을 대체합니다.
• Promise기반으로 동작합니다.

fetch("http://~~~")
 .then(data => {
 	 return data.json()
  })
  .then(list => {
  	 console.log(list);
  })

대략적인 사용법은 위와 같은 방법으로 사용된다. Promise기반으로 사용되기 때문에 then을 이용하여 Promise를 처리해준다. 그리고 fetch의 기본 응답 결과는 Response 객체이기 때문에 json으로 바꾸거나 text로 바꾸는 등의 처리를 해줘야합니다.

Response 객체 예시

✅ fetch 특징

• fetch는 HTTP error가 발생하더라도 reject 되지 않는다.
• 네트워크 에러나 요청이 완료되지 못한 경우에만 reject된다.
• 따라서 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로 status code 코드를 체크해주는 것이 좋다.

fetch("http://~~~")
 .then(data => {
 	 if(data.ok){
 	 	return data.json()
     }
     throw new Error("요청이 완료되지 못함");
  })
  .then(list => {
  	 console.log(list);
  })

 

이번 과정을 수행하면서 api 요청하는 방법에는 다양한 방법이 있는데 뭐가 좋은지 상황에 따라 다르게 쓰이는지

궁금해졌다. 대략 알고있는 것들은 ajax, XMLHTTPRequest, fetch, axois 정도가 있는데 상세히 파악해봐야겠다.

 

📖 학습한 내용

• VanillaJS (4)
  • fetch API 써보기