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:
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/awaitis 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];});For convenience, aliases have been provided for all common request methods.
For convenience, aliases have been provided for all common request methods.
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);});You can specify config defaults that will be applied to every request.
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'): statichttp.setToken(AUTH_TOKEN);// `Bearer ` with or withoutdelete Authorization Token
http.setToken();you can update _token or Authorization token using this method.
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;| 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 |