a simple class to handle RESTful API requests in json with minimal required setup
npm install restful-api-handlernpm i restful-api-handler`
Setup
In your main file or component, for example App.vue, import the package and initialize your class instance like so:
`
`
That's it! As you can see it uses a method called "check" to see if the connection is healthy. Run it and see if it's so.
Basic config & use
$3
By default the base url for the API server is set to: window.location.origin + '/api'
However your can change this by your hearts content or even open a second channel if you like, by giving the class some config-object:
`
const APIconnA = new APIHandler({baseURL:"http://somegreatdomain.com/api/v2"}
const APIconnB = new APIhandler({baseURL:"http://localhost:3000"}
`
the baseURL is set as a public global so you can also set or change it trough the instance:
`
const APIconnA = new APIHandler({baseURL:"http://somegreatdomain.com/api/v2"}
// do whatever
APIconnA.baseURL = "http://otherGreatDomain.com/api"
// now you have switched to another server and can do requests here.
`
Attention: whatever you do, don't suffix your url with a /
your IDE will warn you with a type error if you try ending with a slash
$3
Not required but recommended, before firing hell to that poor server we like to make sure it is actually there and we have internet to begin with. Another Vue example (ref is a making it a reactive value):
`
let isOk = ref(false)
const APIconnection = new APIHandler();
isOk = await APIconnection.check();
isOk ? notify("yes! Let's start the game") : notify("something wrong dude..");
`
isOk will now be eighter true or false indicating if there is a connection. If it is false, it will try to reconnect.
If you like to dipstick the connection for its ok-state you do like so:
`
await APIconnection.check()
// ... some stuff you like to do
let isStillOk = APIconnection.isOk()
`
In addition, if you like to get fancy, the succes or failed callbacks are called when using .check(). Here are their properties:
|isOk state |corresponding callback |attempted reconnect?
|--|--|--|
| true | succes()=>{status: "API-ready", response: ""} | no
| false | failed()=>(status: "no-API", err: ""} | no
| false | failed()=>(status: "connection-interupt", err: ""} | no
| true | succes()=>{status: "connection-restored", response: ""} | yes
| false | failed()=>{status: "reconnect-failed", err: ""} | yes
cool huh? as you can tell there is some reconnecting going on. See the reference docs to see how to change the intervaltime.
$3
Enough prepping. We want to send some request! Here is an example of a bare case scenario:
`
`
or you could wait the requestJSON out and let the succes or failed callbacks do their job:
`
const APIconnection = new APIHandler({
succes: (response)=>showProducts(response),
failed: ()=>showError("oops, you really did it this time", err)
});
await APIconnection
.check()
.requestJSON('/allproducts');
`
$3
Sometimes you just want to do a bunch of requests all at the same time. This is best done with multiRequestJSON(). You can do this with eighter an array of endpoints or objects.
With endpoints as an array of strings:
`
const APIconnection = new APIHandler({
succes: (responses)=>showDRI(responses),
failed: ()=>showError("oops, it's not going so well", err)
});
APIconnection.multiRequestJSON(['/DRI_energy', '/DRI_prot', '/DRI_water'])
`
> ⚠️ Note: The multiRequestJSON method expects an array of strings, not comma-separated strings!
...or with objects in an array allowing options instead:
`
APIconnection.multiRequestJSON([
{endpoint: '/posts', {method: 'POST', body: "some data to be send"}},
{endpoint: '/DRI_prot'},
{endpoint: '/DRI_water'},
])
``