Skip to content

Repository files navigation

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:

importhttpfrom'@ducor/http-client';//const http = require('@ducor/http-client'); // legacy way// Make a request for a user with a given IDhttp.get('/user?ID=12345').then(function(response){// handle successconsole.log(response);}).catch(function(error){// handle errorconsole.log(error);}).finally(function(){// always executed});// Optionally the request above could also be done ashttp.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.asyncfunctiongetUser(){try{constresponse=awaithttp.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

functiongetUserAccount(){returnhttp.get('/user/12345');}functiongetUserPermissions(){returnhttp.get('/user/12345/permissions');}Promise.all([getUserAccount(),getUserPermissions()]).then(function(results){constacct=results[0];constperm=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 serverdata: {},// `status` is the HTTP status code from the server responsestatus: 200,// `statusText` is the HTTP status message from the server responsestatusText: '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 requestconfig: {},// `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 browserrequest: {}}

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 baseUrlhttp.setBaseURL(url);//remove baseUrl http.setBaseURL();

and you can also set Authorization token via method

// interfacefunctionsetToken(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:

importhttpfrom"@ducor/http-client";importtoastfrom"react-hot-toast";http.setToast(toast);// toast | 'alert' | false;
OptionDescription
toastClass or function for toast notifications.
'alert'Uses the window's default alert.
falseDisables the toast notifications or alert.

Most likely, all React standart toasters are supported.

-NameInstall Command
☑️react-toastifynpm install react-toastify
☑️react-hot-toastnpm install react-hot-toast
☑️sonnernpm install sonner

About

Promise object oriented based HTTP client for the browser

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Packages

Used by

Contributors

Languages