High level API for fetch with sensible defaults making client server requests a breeze.
npm i fetch-me-json
import JSONFetch from 'fetch-me-json'
JSONFetch.<<method>>(<<endpoint>>, <<JSON-payload>>)
.then(<<JSON-ResponseBody>> => ...)
.catch(<<errorMessage>> => ...)
import JSONFetch from 'fetch-me-json'
JSONFetch.get('/resources/1')
.then(bodyInJSON => console.log(bodyInJSON))
.catch(errorMessage => console.log(errorMessage))You can also pass query parameters.
import JSONFetch from 'fetch-me-json'
JSONFetch.get('/resources/1', {
optional_parameter: 1
})import JSONFetch from 'fetch-me-json'
JSONFetch.post('/resources', {
id: 1,
name: 'Tyler',
type: 1,
})
JSONFetch.delete('/resources/1')
JSONFetch.put('/resources/1', {
name: 'Durden',
type: 1,
})
JSONFetch.patch('/resources/1', {
type: 2,
})These are the internal fetch options that will be applied. You can configure these to your liking (see below).
{
mode: 'same-origin',
credentials: 'same-origin',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}import JSONFetch from 'fetch-me-json'
const configurations = {
errorKey: 'error'
}
JSONFetch.config(configurations)List of possible configurations
| key | description | default |
|---|---|---|
| errorKey | The key (from the response) that should be thrown in the case of an error. Pass null to throw entire response | message |
| defaultPayload | define default payload you always want to pass along | |
| fetch | parameters to be passed down to the global fetch method, overrides default parameters | see internal fetch above |
| baseURL | URL to be prepended for every request's endpoint. E.g. /api or http://localhost:3000 |
- uses and accepts JSON by default
- throws an error when response is not ok
If you need to support older browsers be sure to include the polyfill.
JSONFetch returns a custom HttpError object with a status property that you can make use of.
import JSONFetch from 'fetch-me-json'
JSONFetch.get('/resource').catch(error => {
if (error instanceof JSONFetch.HttpError) {
console.log(error.status)
}
})![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent