fetch-js-wrapper
fetch-js-wrapper
was designed to be used as a lightweight, drop-in replacement for axios when using the native Fetch API. fetch-js-wrapper
aims to do as little as possible but provides some of the basic functionality we're used to from libraries such as axios.
Usage
Basic
Below are some example usages. These are not complete examples, these are intended to demonstrate how you could use the library.
For all available options see options
// Basic HTTP request
import FetchWrapper from './index.js';
const http = new FetchWrapper( {
baseURL: 'https://api.example.com'
} );
const response = await http.get( '/example/endpoint' );
if ( !response.ok ) {
// Handle it
}
const something = await response.json();
// Use it
Utilising Middleware
// Use middleware for JWT authentication
import FetchWrapper from './index.js';
const http = new FetchWrapper( {
baseURL: 'https://api.example.com'
} );
http.use( ( request ) => {
// Get the token from somewhere and set the header
const accessToken = localStorage.getItem( 'accessToken' );
request.headers[ 'Authorization' ] = accessToken;
return request;
}, 'before' );
http.use( async ( response, request ) => {
if ( response.status === 401 ) {
const refreshResponse = fetch( '/refresh', {
headers: {
'Authorization': localStorage.getItem( 'refreshToken' )
}
} );
if ( !refreshResponse.ok ) {
// Handle it...
}
const tokens = await refreshResponse.json();
localStorage.setItem( 'accessToken', tokens.access );
localStorage.setItem( 'refreshToken', tokens.refresh );
// Retry the original request that failed...
return http.request( response.url, request );
}
return response;
}, 'after' );
const response = await http.get( '/example/endpoint' );
// Do what you need to do
Available Options
Below are all of the options available when creating a new instance of FetchWrapper
. Pass a single object to the constructor.
Key | Type | Default Value | Description |
---|---|---|---|
baseURL |
String | "" | A URL to prefix all relative requests with. |
Example of passing options
new FetchWrapper( {
baseURL: 'https://api.example.com'
} );
Installing
Using npm:
$ npm install fetch-js-wrapper
Browser Support
If you need to support older browsers that do not natively support ES6 (classes, let, const etc.) you can import index.min.js
, see our package.json
for browserlist support configuration.
The main bundle comes as-is, i.e. without polyfills, not transpiled or minified in anyway. If you need any of these feature please submit as a feature request or pull request, or feel free to fork the repository and make the changes you require!
Running the tests
Coming soon!
And coding style tests
We use ESLint for managing code style. See .eslintrc
for the complete configuration.
Contributing
Coming soon!
Authors
- Rhys Stubbs - Initial work
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
- Thanks axios for the inspiration!