📚TIL

day15

fetch api

• 비동기 http 요청을 쓰기 편하게 해주는 API
• XMLHTTPRequest를 대체
• Promise 기반으로 동작
• IE, 옛날 버전의 브라우저는 지원하지 않음

fetch 사용하기

• fetch의 기본 응답 결과는 Response객체
• Response객체를 얻은 후 JSON으로 또는 text로 변경하는 등의 처리가 필요

fetch(url)	//httpRequest를 날릴 url
	.then(res => {
  		console.log(res)	//Response값 출력
		return res.json()	//json으로 바꿔주기
	})
	.then(todos => {	
  		//todos 조회 완료
		console.log(todos)	//json데이터 출력
	})

Response의 매서드

• arrayBuffor, blob, clone, error, formData, json, redirect, text
• Response.blob() : 이미지 처리 시 사용, 불러진 이미지 데이터를 url 객체로 변경해서 사용 가능

const img = document.createElement('img')	//img테그 만들기
const imgURL = 'url'	//url 변수에 저장

fetch(imgURL)
	.then(res => {
		return res.blob()	//파일 형식이라고 자동으로 인식
	})
	.then(blob => {
		const objURL = URL.createObjectURL(blobk)
        img.src = objURL	//img src에 url 넣기
  
  		document.querySelector('body').appendChild(img)
	})

fetch와 error

• fetch는 HTTP error가 발생하더라도 reject되지 않음
• 네트워 에러나 요청이 완료되지 못한 경우에만 reject
• 따라서 fetch가 성공했는지를 한번 더 체크해야 함
• Response의 status code나 ok를 체크해 주는 방식을 사용
• ok가 true인 경우 요청 성공, false인 경우 강제로 에러 throw
• res.ok는 status가 200~299 사이인 경우 true가 되며 300대에는 ok가 안떨어질 수 있음을 유의

fetch('URL')
	.then(res => {
		if(res.ok)return res.json()
  		throw new Error(`Status : ${res.status}! 요청 처리 오류`)	
  		//ex)Status : 404! 요청 처리 오류
	})
	.then(result => {
		console.log(result)
	})
	.catch(e => {
		document.querySelector('body').innerHTML = e.message
	})

fetch 옵션

• fetch의 두번째 인자로 옵션을 줄 수 있음
• method(POST, PUSH...), header 등을 지정할 수 있음
• 입력하지 않을 시 GET 메서드로 진행돼 url로부터 콘텐츠 다운
• 클라이언트에서 서버에 요청할 때 넘기는 인증 토큰을 header에 약속된 이름으로 만들어 넣을 수 있음
• POST : 새로운 product를 추가하는 요청을 하고 싶을 때 사용 - Response body에 json.stringify로 product넣기

const headers = new Headers()
headers.append('x-auth-token', 'TOKEN')	
//인증 토큰을 이름을 지정해 헤더에 넣음


fetch('URL', {		//서버에 요청
	method : 'POST'
	headers,
  	body : JSON.stringify(product)
})

🌊하루를 마치며

15일차 강의를 들었다! fetch의 이론적인 부분들을 배우고 fetchAPI를 직접 사용해서 실습했다. api를 사용하는 것이 생각만큼 어렵지 않았지만 아직 컴포넌트를 제작하는 것이 아직 어려워서 공부한 것들을 받아들이기가 쉽지 않았다. 그래도 실습을 따라하며 state를 구성하여 상위 컴포넌트와 하위 컴포넌트가 어떻게 소통하는지 알아갈 수 있었다. 추가적으로 Promise.all을 지난주에 배웠었는데 이 부분을 실제로 사용해보면서 어떻게 사용하는 것인지 정확히 알게 되었다. 이번 강의를 완벽하게 이해하진 못했지만 컴포넌트를 계속 사용하면서 더 익숙해지고 있다고 느꼈다.
내일은 스터디 준비와 함께 16일 강의를 들을 예정이다!