#TIL_21.08.31

fetch api

• 비동기 http 요청을 좀 더 편하게 사용할 수 있게 해주는 api
• XMLHTTPRequest 를 대체하여 사용됨
• Promise 기반으로 동작
• fetch 의 두번째 인자로 옵션을 줄 수 있음

fetch('http request 를 날릴 url')
	.then(res => res.json())
// 

• fetch 응답 결과인 res 에서 리턴된 값은 Response 객체
  이 데이터는 바로 사용하지 못하고 바꿔 사용해야함 ... 일반적으로 json 데이터로 변환 후 사용 res.json() or res.text()

blob

• fetch api 의 blob 은 이미지 처리에 사용 res.blob()

(... return res.blob() ...).then(data => {
	const url = URL.createObjectURL(data)
})
// 위와 같은 방식으로 이미지의 url을 추출할 수 있다.

// 추출된 url은 아래처럼 불러올 수 있다.
$img.src = url
document.querySelector('.app').appendChild($img)

fetch의 에러처리

• fetch는 HTTP 에러가 발생해도 reject 되지 않음
  네트워크 에러나 요청이 완료되지 못한 경우에만 reject 됨
  ... 서버 요청중에 에러가 발생해도 then 으로 넘어가므로, response 의 status code 혹은 ok 를 체크해 주는 것이 좋음

if(res.ok) return res.json()
throw new Error('존재하지 않는 API')

• API 와 렌더링을 따로 처리하여 관리하는게 오류 캐치에 더 쉽다.

---

회고

위 주제로 실습을 진행하면서 api를 다루는 법을 배우게 되었다.
api를 가져와서, 데이터를 원하는 형태로 만들어서 화면에 출력하기까지 많은 과정을 거쳤는데, 중간마다 어디서 잘못되었는지 찾는게 많이 어렵고 힘든 과정이었다..

데이터를 원하는 형태로 막힘없이 가공할 수 있을 때까지 연습해야겠다!