http-request-fetch

http-request-fetch

fetch API에 기반한 http 요청 모듈입니다.

설치 방법

Using npm:

npm i http-request-fetch

Using yarn:

yarn add http-request-fetch

사용 방법

in ES Module:

import createHttp from "http-request-fetch";

in CommonJS:

const createHttp = require("http-request-fetch").default;

예시

import createHttp from "http-request-fetch";

const http = createHttp();

http.request("/api/1").then(function (response) {
  // ...
});

Base URL, Default Config

http 함수를 생성할 때, 요청시 기본 url과 기본 config를 설정할 수 있습니다.

const BASE_URL = "https://api.example.com";

const DEFAULT_CONFIG = { headers: { "Content-Type": "application/json" } };

const http = createHttp(BASE_URL, DEFAULT_CONFIG);

http.request("/api/1"); // https://api.example.com/api/1로 요청

Interceptors

http 요청이나 응답이 처리되기 전에 가로채서 특정 로직을 수행하도록 설정할 수 있습니다.

Interceptors 사용법 및 Interceptor 종류

const http = createHttp();

http.registerInterceptor({
  onRequest: function (config) {
    // request를 보내기 전 수행할 로직
    return config;
  },
  onResponse: function (response) {
    // response를 받고나서 수행할 로직
    return response;
  },
  onRequestError: function (reason) {
    // request 과정에서 에러가 발생할 경우 수행할 로직
    return Promise.reject(reason);
  },
  onResponseError: function (reason) {
    // response 과정에서 에러가 발생할 경우 수행할 로직
    return Promise.reject(reason);
  },
});

Interceptor를 활용해서 인증 토큰 갱신, 응답 에러 처리 등 기존의 반복적이고 불편했던 통신 로직들을 쉽게 처리할 수 있습니다.

HttpResponse Type

http의 응답 값은 fetch API의 Response 타입을 확장한 HttpResponse 타입의 응답 값을 반환 받습니다.

HttpResponse

HttpResponse 타입은 Response 타입에서 data 필드가 추가되었습니다.

type HttpResponse<T extends object> = {
  data: T;
  config: RequestInit;
  headers: Headers;
  ok: boolean;
  redirected: boolean;
  status: number;
  statusText: string;
  type: ResponseType;
  url: string;
};

Response의 body가 JSON 형식일 경우, JSON 파싱을 해서 data 필드에 담겨지게 됩니다.

사용 예시

// before using http
fetch("/api/1")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

// after using http
http.request("/api/1").then((response) => {
  console.log(response.data);
});

기존의 fetch 요청에서의 json 파싱 과정은 반복되는 로직이고, 에러 발생 가능성도 있습니다.

http에서는 별도의 json 파싱 과정 없이 바로 data를 사용할 수 있습니다.

HTTP Method alias

편의를 위해 http 메소드별 alias를 사용하여 요청할 수 있습니다.

• http.get(url, config?)
• http.post(url, config?)
• http.patch(url, config?)
• http.put(url, config?)
• http.delete(url, config?)

사용 예시

// GET 요청
http.get("/api/1");

// POST 요청
http.post("/api/1", { body: { example: 1 } });

License

MIT