Body
-
Body는 Mixin믹스인이다.
- 믹스인은 객체지향 용어로, 슈퍼 클래스를 지칭한다. 그러나 믹스인은 단독으로 사용할 수 없고 서브 클래스에서 상속받아 사용한다.
- Fetch의 Body는 Request와 Response에서 상속받는다.(즉 요청할 때도 body를 사용하고, 응답 받을 때도 body를 사용한다는 것이다.)
// Response에서 Body를 상속 받는 형태 async function getImage(url) { const res = await fetch(url); const blob = await res.blob(); const el = document.querySelector("img"); el.src = URL.createObjectURL(blob); } getImage("../../images/something.png");
- fetch 실행이 끝나면, FETCH API는 내부적으로 Body Object를 상속받아, Response 인스턴스를 생성한다. 즉, Response, Request Object에는 Body 인스턴스가 포함되어 있다.
blob()
메소드는 body object의 메소드다. 상속이 되어 있으므로res.blob()
이 가능하다.
Body 믹스인의 프로퍼티
- body
- ReadableStream 오브젝트로, 데이터 스트림을 포함한다. 즉, 데이터를 보낼 때, 받을 때 모두 body에 데이터가 설정된다.
- bodyUsed
- body를 사용했냐 여부를 담고 있다.
- arrayBuffer() 메소드
- ArrayBuffer 인스턴스를 반환한다.
- blob() 메소드
- Blob 인스턴스를 반환한다.
- formData() 메소드
- FormData 인스턴스를 반환한다.
- json() 메소드
- JSON.parse()의 결과를 반환한다.
- text() 메소드
- Text를 UTF-8로 인코딩하여 반환한다.
await function getData(url){
const res = await fetch(url)
log(res.bodyUsed) //=> false
log(await res.json())
log(res.bodyUsed) //=> true
log(res.body)
}
res.bodyUsed
res.json()
이전에는 body를 사용하지 않았으므로 bodyUsed는 false를 담고있고,.json()
에서 body를 한 번 사용했으므로, 이후의 bodyUsed는 true를 담고 있다.await res.json()
body의 메소드들은 Promise 환경에서 실행되므로 await 처리를 해줘야된다.
Headers
- Req, Res 의 "Header" 오브젝트로 사용은 Headers로 한다.
{name:value}
형태- Headers 오브젝트의 메소드를 사용하여 헤더 속성 CRUD 가능
- HTTP Headers에 있는 모든 것을 사용 가능하다.
- HTTP를 공부하는 것이 낫다.
async function postData(url, option) {
const res = await fetch(url, option);
console.log(res.headers.get("Content-Type"));
}
//통신 옵션
const option = {
method: "POST",
headers: {
"Content-Type": "text/plain:charset=utf-8",
},
body: JSON.stringify('{"book": "책"}'),
};
res.headers.get("Content-Type")
와 같이 헤더의 프로퍼티를 get해올 수 있다.- fetch로 넘겨줄 옵션에
headers :
와body :
를 설정할 수 있다. - headers에 설정된
content-type
은, 내가 설정한 것으로 보내달라고 요청하는 것이다.
Headers 오브젝트
옵션은 너무 많아서 정리하는 시간이 아깝다. 메소드에 대해 알아보자
**new Headers
로 헤더만 따로 작성 가능하다.
append()
{name, value}
형식으로 새로운 헤더 속성 추가
delete()
- 속성 제거
get()
- 속성 반환
has()
- 속성 존재 여부
set()
- 속성 값 변경, 속성 없으면 추가함
for-of
- 헤더 전체를 k/v 형태로 전개
const obj = new Headers({
"Content-Type": "text/plain:charset=utf-8",
//"Cache-Control": "no-cahce"
});
obj.set("Cache-Control", "no-cahce");
const option = {
method: "GET",
headers: obj,
body: JSON.stringify('{"book":"책"}'),
};
async function postData(url, option) {
const res = await fetch(url, option);
}
postData("~~~/api/data", option);