fetch

fetch API

• 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API

• XMLHTTPRequest을 대체
• 우리가 썼던 api.js가 필요가 없다.

fetch(url|Request객체)

• 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환

• resolve 반환 값은 HTTP 응답 body를 나타내는 객체

• 인자 하나, url만 넣으면 get요청이다.

• fetch(url, options) 로 두번째 인자에 객체 형태로 옵션을 넣을 수 있다
• 객체 안에 {요청 method, 추가할 headers, 추가할 body, 등…}을 담아 요청을 수정할 수 있다.
• 옵션의 속성
• method : 요청 메서드(GET, POST 등)
• headers : 헤더들. 객체 리터럴로 제공, ex) 'Content-Type': 'application/json'
• body : 본문. 객체 형태, GET은 쓸 수 없다.
• cache : 요청이 브라우저 HTTP 캐시와 상호작용 하는 방법
• default, no-store, reload, no-cache 등
• redirect : 리다이렉트 응답 처리법
• follow, error, manual 등
…등등

• 서버에서 응답 header를 받자마자 promise가 response와 함께 resolve가 된다.
• 이 단계는 아직 body가 도착하기 전이다.
• 따라서, 응답 헤더를 못 받은 경우(네트워크 오류 or 요청이 완료되지 못한 경우)만 reject되며, (404 등의) HTTP 오류 시에는 reject되지 않는다.
• 그래서 handler는 반드시 Response.ok 또는 Response.status 속성으로 body 상태를 확인해야 한다.
ex)

fetch('~')
	.then(res => {
		if (res.ok) { //status가 200~299 사이일 때만
			return res.json()
		}
		throw new Error(`Status: ${res.status}! 요청을 처리하지 못했어요`)
	})

• json() : 응답 body를 객체로 파싱한 것을 resolve 값으로 하는 프로미스 반환
• 응답 body를 JSON.parse한 것과 유사
ex)

fetch('~')
	.then(res => {
		return res.json()
	})
	.then(data => { //data는 parsing된 객체(그냥 쓰면 되세여~)
		console.log(data)
	})

• text() : 응답 body를 JSON화 한 것을 resolve 값으로 하는 프로미스 반환
• 응답 객체가 JSON.stringify된 것과 유사
• 이걸 parsing하면 위의 json() 결과 값과 동일하다.
ex)

fetch('~')
	.then(res => {
		return res.text()
	})
	.then(data => { //data는 JSON
		console.log(JSON.parse(data)) //파싱해서 사용
	})

• blob() ⇒ 응답 body를 Blob 객체로 변환하여 resolve 값으로 하는 프로미스 반환
• Blob : size, type 속성을 가진 객체
• 멀티미디어 데이터를 다룰 때 사용
ex)

const $image = documnet.createElement('img')
const imageUrl = 'https://~'

fetch(imageUrl)
	.then(res => {
		return res.blob()
	})
	.then(data => {
		const url = URL.createObjectURL(data)
		$image.src = url
		document.querySelector('body').appendChild($image)
	})

 
 

• json은 문자열이 아니다..! json은 형식일 뿐!
• json.parse(문자열) : json 형식의 문자열 → 객체로!
• json.stringify(객체) : 객체 → json 형식의 문자열로!
• res.json() : json 형식의 res의 본문 → 객체로!