JSPM

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

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