브라우저 fetch() 호출 간소화

이것은 짧고 달콤할 것입니다 :). fetch 주변에 래퍼 함수(gzip으로 압축된 330바이트)를 만들어 브라우저fetch 함수 사용을 단순화할 것입니다.

따라서 가져오기 코드를 수백 번 작성한 후 조금 단순화할 때라고 결정했습니다.

그래서 이것 대신에:

try {
  const response = await fetch('https://example.com')
  // ok is true only for 200-299 response codes 
  if (response.ok) { 
    const data = await response.json()
  } else {
    throw response
  }
} catch (e) {
  console.log(e)
}

나는 이것을 할 수 있다:

import fetch from 'nice-fetch'

try {
  const [data, response] = await fetch('https://example.com')
} catch (e) {
  console.log(e)
}

작은 개선 사항을 알고 있지만 시간이 지남에 따라 추가됩니다. :)

용법

nice-fetch는 일반fetch과 동일한 인수를 허용하며 반환될 것으로 예상되는 응답의 본문type인 추가 인수가 하나 더 있습니다. 기본값은 json 입니다. 이는 응답 본문 내용을 처리하는 방법을 결정합니다.

// if (response.ok)
const data = await response.json() // <- json is the default
// } else {

다른 매개변수는 모두 Body mixin에서 사용 가능한 방법입니다.

예를 들어:

import fetch from 'nice-fetch'

// data is JSON (default)
const [data, response] = await fetch('https://example.com')

// data is JSON
const [data, response] = await fetch(
  'https://example.com',
  { method: 'GET' },
  'json' // <- explicit
)

// data is Blob
const [data, response] = await fetch(
  'https://example.com',
  { method: 'GET' },
  'blob'
)

// data is string
const [data, response] = await fetch(
  'https://example.com',
  undefined // <-- pass undefined for RequestInit
  'text'
)

반환 값

이 함수는 이미 처리된 응답 내용(data 호출이 필요 없음) 및 원본 response.json() 개체를 처리한 response 튜플을 반환합니다.

오류 처리

이와 같이 코드를 작성하면 모든 오류를 catch 블록에서 처리할 수 있습니다.

try {
  const [data, response] = await fetch('https://example.com')
} catch (e) {
  console.log(e)
}

response.ok가 true가 아닌 경우(상태가 200-299 범위에 없음) fetch 전체 Response object와 함께 throw됩니다.

응답 본문 내용을 제대로 처리할 수 없는 경우. 잘못된 JSON, 함수는 오류를 다시 발생시킵니다.
fetch 호출 자체에 오류가 있는 경우( 네트워크 요청 실패, 시간 초과) 함수도 해당 오류를 다시 발생시킵니다.

다음을 사용하여 설치할 수 있습니다.

npm i nice-fetch

저장소: nice-fetch
유용하게 사용하시기 바랍니다.