HttpClient

We love axios! It has simple api and consistently works in web, node and react-native.

Also we love to use it with rxjs, it helps to add simple retry functionality, control http pool and prevent unwanted memory leaks.

But also we like to use "path patterns" (e.g: /user/:userId/order/:orderId) for api calls.

And ofcourse we wan't to know what kind of errors we have in our responses.

We want these features in every project!

Installation

yarn add rxjs @dc0de/http-client

Usage

Initialization

import {
  HttpClient,
  HttpStatus,
  isHttpClientError,
  getHttpClientErrorStatus,
  isHttpClientTimeoutError
} from "@dc0de/http-client";

export function createHttpClient(logger, getToken, unauthorize) {
  return new HttpClient({
    requestInterceptor(config) {
      const token = getToken();

      config.headers = {
        ...config.headers,
        Accept: "application/json",
        "Content-Type": "application/json"
      };

      // Set authorization header.
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }

      // Set default timeout if it wasn't defined.
      if (config.timeout == null) {
        config.timeout = config.method === "GET" ? 10 * 1000 : 30 * 1000;
      }

      logger.logRequest(config);
    },

    responseInterceptor(config, response) {
      logger.logResponse(config, response);
    },

    errorInterceptor(error) {
      if (getHttpClientErrorStatus(error) === HttpStatus.Unauthorized) {
        unauthorize();
      }

      logger.logError(error);
    },

    shouldRetry({ attempt, error, config }) {
      // Do not retry `GET` requests.
      if (config.method !== "GET") {
        return false;
      }

      // Do not retry if it's not a HttpClientError.
      if (!isHttpClientError(error)) {
        // It may be sync error thrown during config composition.
        return false;
      }

      // Stop if there was 3 attempts.
      if (attempt > 3) {
        return false;
      }

      // Retry if it's timeout error.
      if (isHttpClientTimeoutError(error)) {
        return true;
      }

      // Retry if it was some server error.
      if (getHttpClientErrorStatus(error) >= 500) {
        return true;
      }

      return false;
    }
  });
}

Request

const USER_URL = "/user/:userId";
const USER_COMMENTS_URL = "/user/:userId/comments";

export function fetchUser(httpClient, userId) {
  return httpClient.get(USER_URL, {
    pathParams: { userId }
  });
}

export function fetchUserPosts(httpClient, userId, page, limit) {
  return httpClient.get(USER_COMMENTS_URL, {
    url: USER_URL,
    pathParams: { userId },
    queryParams: { page, limit }
  });
}