Installing

Using npm:

$ npm install @ducor/http-client

Using yarn:

$ yarn add @ducor/http-client

Once the package is installed, you can import the library using import or require approach:

Example

Note: CommonJS usage In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require(), use the following approach:

import http from '@ducor/http-client';
//const http  = require('@ducor/http-client'); // legacy way

// Make a request for a user with a given ID
http.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

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

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

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

Performing a POST request

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

Performing multiple concurrent requests

function getUserAccount() {
  return http.get('/user/12345');
}

function getUserPermissions() {
  return http.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

Request method aliases

For convenience, aliases have been provided for all common request methods.

Request method aliases

For convenience, aliases have been provided for all common request methods.

http.request(config)

http.get(url[, config])

http.delete(url[, config])

http.head(url[, config])

http.options(url[, config])

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

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

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

Response Schema

The response for a request contains the following information.

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lowercase and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `http` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

When using then, you will receive the response as follows:

http.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

Config Defaults

You can specify config defaults that will be applied to every request.

Global http defaults

http.defaults.baseURL = 'https://api.example.com';

// Important: If http is used with multiple domains, the AUTH_TOKEN will be sent to all of them.
// See below for an example using Custom instance defaults instead.
http.defaults.headers.common['Authorization'] = AUTH_TOKEN;

http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

and you can also set baseURL token via method

// add baseUrl
http.setBaseURL(url);
//remove baseUrl 
http.setBaseURL();

and you can also set Authorization token via method

// interface

function setToken(
  token: string | null = null, 
  tokenName: string = '_token', 
  storageName: 'localStorage' | 'cookies' = 'localStorage'
): static

http.setToken(AUTH_TOKEN); // `Bearer ` with or without

delete Authorization Token

http.setToken();

you can update _token or Authorization token using this method.

Working with Any Toaster System

To set a toaster for your HTTP client, you can use the following code snippet:

import http from "@ducor/http-client";
import toast from "react-hot-toast";

http.setToast(toast); // toast | 'alert' | false;

Option	Description
toast	Class or function for toast notifications.
'alert'	Uses the window's default alert.
false	Disables the toast notifications or alert.

Most likely, all React standart toasters are supported.

-	Name	Install Command
☑️	react-toastify	npm install react-toastify
☑️	react-hot-toast	npm install react-hot-toast
☑️	sonner	npm install sonner