[JS] fetch response.json()

Stream

스트림은 데이터를 연속적으로 전송하거나 처리하는 흐름

Chunk

데이터를 조각낸 단위를 chunk(청크)데이터라고 부른다

Buffer

데이터를 일시적으로 저장하는 임시 공간

// 스트림의 청크데이터에 접근하기 위한 reader()객체 생성
const getbody = response.body.getReader();

// getbody 출력결과
ReadableStreamDefaultReader {
  stream: ReadableStream { locked: true, state: 'readable', supportsBYOB: false },
  readRequests: 0,
  close: Promise { <pending> }
}

// 비동기적으로 청크 데이터를 읽기 위해 await와 read() 메서드 사용
const body = await getbody.read();

// body 출력결과
Uint8Array(292) [
  123,  10,  32,  32,  34, 117, 115, 101, 114,  73, 100,  34,
   58,  32,  49,  44,  10,  32,  32,  34, 105, 100,  34,  58,
   32,  49,  44,  10,  32,  32,  34, 116, 105, 116, 108, 101,
   34,  58,  32,  34, 115, 117, 110, 116,  32,  97, 117, 116,
   32, 102,  97,  99, 101, 114, 101,  32, 114, 101, 112, 101,
  108, 108,  97, 116,  32, 112, 114, 111, 118, 105, 100, 101,
  110, 116,  32, 111,  99,  99,  97, 101,  99,  97, 116, 105,
   32, 101, 120,  99, 101, 112, 116, 117, 114, 105,  32, 111,
  112, 116, 105, 111,
  ... 192 more items
]

// 청크로 읽어온 데이터를 텍스트로 디코딩하고 JSON으로 변환
const jsonData = JSON.parse(new TextDecoder().decode(body.value));

{
  userId: 1,
  id: 1,
  title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
  body: 'quia et suscipit\n' +
    'suscipit recusandae consequuntur expedita et cum\n' +
    'reprehenderit molestiae ut ut quas totam\n' +
    'nostrum rerum est autem sunt rem eveniet architecto'
}

await response.json() 사용합시다

https://darrengwon.tistory.com/126