Promise based HTTP client for the browser and node.js

Table of Contents

• Features
• Installing
• Example
• Request method aliases
• Request Config
• Working with token
• Requests Stack

Features

• Make [XMLHttpRequests] with axios from the browser or nodejs
• Optimization of concurrent sending of the equal requests.
• Supports the jwt tokens with tokens lifecycle
• Other axios features

Installing

Using npm:

$ npm install jwt-rest-api-client

Using yarn:

$ yarn add jwt-rest-api-client

Example

Creating an instance

You can create a new instance of apiClient with a custom config.

new apiClient([config])

import { ApiClient } from "jwt-rest-api-client";

const instance = new ApiClient({
  baseURL: "https://some-domain.com/api/",
});

Performing a GET request

// Make a request for a user with a given ID
instance
  .get("/user?ID=12345")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
instance
  .get("/user", {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await instance.get("/user?ID=12345");
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use with caution.

Performing a POST request

instance
  .post("/user", {
    firstName: "Fred",
    lastName: "Flintstone",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

VueJS 2 Using

In main.js

import { ApiClient } from "jwt-rest-api-client";

Vue.prototype.$apiClient = new ApiClient({
  baseURL: process.env.VUE_APP_BASE_API_URL,
});

In VUEX

actions {
  async getData(state) {
    let response = await this._vm.$apiClient
      .get("users/self");
  }
  ...
}

VueJS 3 Using

.env:

VUE_APP_BASE_API_URL=YOUR_API_URL

In main.js

import { Vue3Plugin } from "jwt-rest-api-client/src/plugins";

createApp(App).use(Vue3Plugin, "apiClient").mount("#app");

Nuxt js

Create plugin

plugins/api-client.js

import Vue from 'vue';
import { ApiClient } from 'jwt-rest-api-client';

const apiClient = new ApiClient({
  baseURL: process.env.VUE_APP_BASE_API_URL,
});

Vue.prototype.$apiClient = apiClient;
export default ({ app }, inject) => {
  app.$apiClient = apiClient;
  app.$apiClient.setCustomCookieManager(app.$cookiz);
};

In nuxt.config.js

{
  ...
  modules: [
        ['cookie-universal-nuxt', { alias: 'cookiz' }],
  ],
  plugins: [
    { src: '~/plugins/api-client.js' },
  ]
}

React

//TODO

Request method aliases

For convenience aliases have been provided for all supported request methods.

apiClient.request(config)

apiClient.get(url[, config])

apiClient.delete(url[, config])

apiClient.head(url[, config])

apiClient.options(url[, config])

apiClient.post(url[, data[, config]])

apiClient.put(url[, data[, config]])

apiClient.patch(url[, data[, config]])

NOTE

When using the alias methods url, method, and data properties don't need to be specified in config.

Request Config

Axios request config

Custom configs

| Config | Type | Required | Default | | ---------------------- | ------- | -------- | ------------- | | baseURL | string | true | | | port | number | false | 80 | | headers | any | false | | | refreshTokenUrl | string | false | /auth/refresh | | needRefreshAccessToken | boolean | false | true |

Working with token

The client stores your accessToken in a cookie (browser) or node-localstorage(node.js). List of methods to work with:

client.accessToken.set(token_object)

client.accessToken.get()

client.accessToken.remove()

client.accessToken.refreshAccessToken() - Updates the accessToken in memory. Sends a request to the api to get a new token

client.accessToken.isExpired()

Requests Stack

Optimization of concurrent sending of the equal requests. If site sends 5 requests from 5 different methods concurrently, these requests will have the same url and payload, then in reality client will send one request, and then give its result to 5 methods. Thus it will not overload the api and the network.

//TODO: example