fetch api

오늘의 TIL주제는 처음 들어보는 API인 fetch api에 대한 정리를 해보도록 하겠습니다


먼저 fetch api란

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

fetch api 사용하기

fetch의 기본 응답 결과인 Response객체를 받아서 json이나 text형태로 바꾸는 처리를 해줘야한다.

blob은 이미지를 처리하는데 사용

const $image = document.createElement('img')
                const imageUrl = '이미지 주소'
                fetch(imageUrl)
                .then(res => {
                    return res.blob()
                })
                .then(data => {
                    const url = URL.createObjectURL(data)

                    console.log(url)

                    $image.src = url

                    document.querySelector('body').appendChild($image)
                })

그리고 한가지 중요한 사실!

fetch는 404등 HTTP error가 발생하더라도 reject되지 않는다는 점

실제로 네트워크 에러나 요청이 완료되지 못한 경우에만 reject가 된다.

그래서 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지기 때문에,
response의 status code나 ok를 체크해주는 것이 좋다!

그리고..
res.ok는 status가 200 ~ 299 사이인 경우에만 true를 반환한다!

---

하루의 마무리

🖤 실습을 따라 하고 이해하는데 시간이 오래 걸린다.
🖤 과연 나중에 혼자서 이런 코드를 다 짤 수 있을까❓ 🙄
🖤 또한 에러가 발생하면 찾아서 수정하고 다음 강의를 따라가야 하는데 만약 찾지 못하게 된다면... 크흠😱