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);

33. Fetch API 구성요소2

Tags

Body

Body 믹스인의 프로퍼티

Headers

Headers 오브젝트