[ TIL ] 프로그래머스 DAY 13 : fetch API

🙋🏻‍♂️

지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. 가급적 오류를 줄이겠지만 일부분 발생할 수 있다는 점 양해부탁드립니다. 잘못된 내용 수정이나 추가 설명이 필요할 때 댓글로 알려주시면 감사하겠습니다.

🍪 배운 목록

• fetch

🍽 배운 내용 요약 및 중요한 것

fetch

fetch는 JS es6부터 지원하는 서버와 http 통신을 하기 위한 함수입니다.

사용법

fetch(...url,{method:"post", header: ..., contentType : ...})
.then((res)=>{
	if(res.ok){
    	return res.json()
    }
    throw new Error()
})
.then((data)=>{
	console.log(data)
})
.catch((err)=>{
	console.log(err)
})

위와 같이 사용하게 됩니다.

먼저 fetch의 인자로는 url이 필수 입력값이고 url만 입력했을 경우에는 디폴트가 get방식으로 통신합니다. 두번째인자로 request 객체의 속성을 설정해서 서버에 요청할 수 있습니다.

그리고 fetch로 통신이 성공하게 되면 response body가 readonly~~ 로 헨들링 할 수 없기 때문에 .json() 이나 .text()로 한번 풀어준 뒤
뒤에 체이닝으로 해당 값을 받아 데이터를 헨들링합니다.

또한, fetch는 오류로 던지는게 서버와의 통신이 끊기는 상황에만 오류를 내뱉기 때문에 실제 클라이언트에서 생긴 오류나 서버에서 데이터 처리하다가 난 오류가 난 경우 따로 에러를 던지지 않고 .then으로 통신이 성공했다고 인식하기 때문에 위에서 res.ok와 같이 response 객체의 status가 200 ~ 299일때만 해당 body를 .json(), .text()하여 다음 then으로 넘겨줍니다. 그게 아니라면 throw new Error()로 에러를 만들어 던져줍니다. 이 에러를 하단의 .catch에서 받게 됩니다.

이렇게 오류를 인지할 수 있지만 서버에서 300에러나 기타 200번대의 에러 또는 400번대 에러를 벗어나는 status를 주면 해당 번호대에 맞게 방어코드 작성이 필요합니다.

🧘🏻‍♂️ 어려웠던 점 및 후기

axios만 사용하다 보니 js 기본 내장 함수인 fetch의 동작원리를 잘 알지 못했는데 이번 기회에 자세히 알게되었습니다.

특히 json처리가 필요하고 데이터를 헨들링 하기위해서는 .then이 두번 체이닝되어야하고 에러를 헨들링할때 좀 더 까다로운 조건이 명시되어야한다는 점을 처음 알게되었습니다.

제일 크게 느낀건 ... axios가 얼마나 서버와의 통신을 간결하게 해주는지 깨닫게되는 순간이었습니다 ㅎㅎ

🔗 참조

프로그래머스