@dc0de/http-client

Simple HttpClient built on top of Axios and RxJS

Stats

StarsIssuesVersionUpdatedCreatedSize
@dc0de/http-client
000.0.123 years ago3 years agoMinified + gzip package size for @dc0de/http-client in KB

Readme

HttpClient

npm version npm minzipped size npm type definitions npm downloads Build Status codecov npm license

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 }
  });
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.