[JS] fetch response.json()

https://velog.io/@zmjjkk98/Promise-pending

블로그글을 보다가
데이터를 json화 시키는것이 왜 비동기 함수일까 궁금해서 찾아봤다
위 블로그의 response를 console.log해본 결과이다.

const response = await fetch(url);
console.log(response);

{
  Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: true,
    requestIncludesCredentials: true,
    type: 'default',
    status: 200,
    timingInfo: {
      startTime: 54.491099999984726,
      redirectStartTime: 0,
      redirectEndTime: 0,
      postRedirectStartTime: 54.491099999984726,
      finalServiceWorkerStartTime: 0,
      finalNetworkResponseStartTime: 0,
      finalNetworkRequestStartTime: 0,
      endTime: 0,
      encodedBodySize: 194,
      decodedBodySize: 0,
      finalConnectionTimingInfo: null
    },
    cacheState: '',
    statusText: 'OK',
    headersList: HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [ [URL] ],
    body: { stream: undefined }
  },
  [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(25) {
      'date' => [Object],
      'content-type' => [Object],
      'transfer-encoding' => [Object],
      'connection' => [Object],
      'report-to' => [Object],
      'reporting-endpoints' => [Object],
      'nel' => [Object],
      'x-powered-by' => [Object],
      'x-ratelimit-limit' => [Object],
      'x-ratelimit-remaining' => [Object],
      'x-ratelimit-reset' => [Object],
      'vary' => [Object],
      'access-control-allow-credentials' => [Object],
      'cache-control' => [Object],
      'pragma' => [Object],
      'expires' => [Object],
      'x-content-type-options' => [Object],
      'etag' => [Object],
      'via' => [Object],
      'cf-cache-status' => [Object],
      'age' => [Object],
      'server' => [Object],
      'cf-ray' => [Object],
      'content-encoding' => [Object],
      'alt-svc' => [Object]
    },
    [Symbol(headers map sorted)]: null
  }
}

찾아보니 response만 console.log하면 형식?구조?만 알려주는 것 같다

https://developer.mozilla.org/ko/docs/Web/API/Response
위 사이트를 찾아보니 많은 메소드가 존재하지만
나는 response.body를 사용해보기로 했다
response.body에서 원하는 데이터를 가져오는 것 같다

https://developer.mozilla.org/ko/docs/Web/API/ReadableStream

response.body를 console.log

Body: ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

ReadableStream << 말그대로 읽기 가능한 스트림
locked: false << 잠김의 여부 true면 잠겨있는거
supportsBYOB: false << "Byte Length Queuing Strategy" (BYOB)를 지원하는지 여부를 나타냅니다

우리가 원하는 데이터를 가져올려면
response.body에 있는 stream형식의 데이터를 변환해서 가져오는 것이다

결론

response.json() Stream을 json형식으로 바꿔주는 비동기 함수다........

오늘은 여기까지 해보고 내일 스트림에 대해 좀더 자세하게 조사해보자