javaScript - fetch() 를 사용해보자!

javaScript에서 비동기 통신을 위한 fetch API를 정리하겠습니다 뿌뿌뿌뿌이~~🥳

---

fetch API 란?

브라우저에 내장된 fetch()함수를 말합니당~~
(그래서 따로 import할 필요가 없다는 것)
이해하기 쉽게 비동기 네트워크 통신을 위한 것이라고 보면 됩니다😗

그러면 ajax와 fetch의 차이는 뭔데😠!

• fetch()는 Promise객체를 return 합니다
• 그리고 http의 error상태를 reject하지 않아요..😤
• status code를 잘 보고 예외처리를 잘 하시길 바래요!

(나중에 ajax도 정리를 한번 해야할거같기도..)

fetch를 어떻게 사용하면 될까?

기본구조는 아래와 같아요

	fetch(url,init)
		.then(callback)
		.catch(callback)

---

fetch를 이용한 간단한 코드

fetch(url)
    .then(res=>{
    	if(res.status === 200 ) { //응답이 성공일때 
            return res.json()
        } else {
            	console.log(`HTTP error! status: ${res.status}`)
          	}
    	})
        .then(jsonData => {
    		console.log(jsonData)
    		})
	.catch(err=>{ //예외 처리를 할때 가급적이면 catch사용하도록한다
    		console.log(err)
    		})

---

참고:https://junhobaik.github.io/ajax-xhr-fetch/

그럼 이만 끝
또 정리하러 오겠습니다😝