A wrapper around Fetch just for JSON
Why would you fetch anything but json? ;)
1) Make REST easy
- Converts the HTTP response to JSON if it's not already JSON (especially convenient for HTTP errors)
- Serializes the body payload with
- Adds the
application/jsonHTTP header to set the data type
- Appends the GET
paramsobject items to the URL
.json()on the response
'same-origin'(support user sessions in Grails, Rails, PHP, Django, Flask, etc.)
In a web page:
or from the jsdelivr.com CDN:
$ npm install node-fetch fetch-json
and then import:
const fetchJson = ;
Fetch the NASA Astronomy Picture of the Day:
// NASA APoDconst url = '';const params = api_key: 'DEMO_KEY' ;const handleData =console;fetchJson;
Create a resource for the planet Jupiter:
// Create Jupiterconst resource = name: 'Jupiter' position: 5 ;const handleData =console; //http response body as an object literalfetchJson;
To see a website that incorporates fetch-json, check out DataDashboard:
4) Leverages the Fetch API and node-fetch
For comparison, the above POST example in section 2 to create a planet would be done calling the Fetch API directly with the code:
// Create Jupiter (WITHOUT fetch-json)const resource = name: 'Jupiter' position: 5 ;const options =method: 'POST'headers:'Content-Type': 'application/json''Accept': 'application/json'body: JSON;const handleData =console; //http response body as an object literal;
The example with fetch-json and the example without fetch-json each produce the same output.
API — HTTP Request
The format for using fetch-json is:
- Only the
urlparameter is required. The other parameters are optional.
fetchJson.get()is converted into a query string and appended to the
resourceobject is turned into the body of the HTTP request.
optionsparameter is passed through to the Fetch API (see the
initdocumentation on MDN).
optionsis enhanced with a boolean setting for
false) that throws an error to
.catch()whenever the HTTP response status is 400 or higher.
Dynamic HTTP method
If you need to programmatically set the method, use the format:
API — Logging
Enable basic logging to the console with:
To use a custom logger, pass in a function that accepts 9 parameters to log.
To disable logging, pass in
To get an array containing the names of the parameters:
The default console output looks like:
2018-09-12T07:20:12.372Z – "request" - "GET" – "api.nasa.gov" – "https://api.nasa.gov/planetary/apod"
2018-09-12T07:20:13.009Z – "response" - "GET" – "api.nasa.gov" – "https://api.nasa.gov/planetary/apod" - true - 200 - "OK" - "application/json"
6) Response text converted to JSON
The HTTP response body is considered to be JSON if the
through the promise an object with a
bodyText string field containing response body text.
In addition to the
bodyText field, the object will have the fields:
For example, an HTTP response for an error status of 500 would be converted to an object similar to:
ok: falsestatus: 500statusText: 'INTERNAL SERVER ERROR'contentType: 'text/html; charset=utf-8'bodyText: '<!doctype html><html lang=en><body>Server Error</body></html>'
With fetch-json, you know the response body will always be passed back to you as a simple object literal.
7) Legacy web browsers
8) Contributor Notes
To be a contributor, fork the project and run the commands
npm install and
npm test on your
local clone. Make your edits and rerun the tests. Pull requests welcome.
Pull requests (PRs) should not update the
version number in package.json or any files in the
dist folder. The
version number and
dist files are all updated as part of the release
Issues labeled "good first issue" make it easy for first time contributors to participate. Only submit a PR for one of these issues if you're new to this project.
"Stop trying to make fetch happen without #fetchJson!"
Feel free to submit questions at: