JSON Fetch Talker

Easy way to send request for a json and control response (using fetch).
Features:

• send get/post request (as FormData)
• handle network errors
• handle non-json format as an error
• use response via callback or errorsHandler

Dependencies:

• whatwg-fetch - fetch polyfill
• promise-polyfill - Promise polyfill
• query-converter - query url converter

Install

npm install json-fetch-talker

Usage

tl;dr

import JSON_Talker from 'json-fetch-talker'
  
let talker = new JSON_Talker()
let formData = {
    name: 'User Name',
    email: '[email protected]'
}
talker.post('/subscribe/', formData, (payload, response) => {
    console.log(payload.text)
    console.log(response.headers)
})

Import class

import JSON_Talker from 'json-fetch-talker'

Create an instance (passing options or not)

let talker = new JSON_Talker(options)

You can override all default options:

defaultOptions = {
    useCatch: false,
    errorsHandle: true,
    errorsHandler: (message) => {
        alert(message)
    },
    
    fetchCredentials: 'same-origin',
    fetchMode: 'same-origin',
    fetchCache: 'no-cache',
    fetchRedirect: 'error',
    fetchHeaders: [
        {
            key: 'X-Fetch-Request',
            value: true
        }
    ]
}

more about options

Create requests with .get() or .post() methods.

Both methods receive ( url: string [, body: object, callback: function, errorsHandler: function] )
calback responds with ( payload: object, response: Response, responseBody: string )
errorsHandler responds with ( message: string, payload: object, response: Response, responseBody: string)
Both methods return Promise

For example:

talker.get('/user_name/', {}, (payload, response, responseBody) => {
    console.log(payload)
    console.log(response.redirected)
    console.log(responseBody)
}, )
  
talker.post('/user_name/', $('form.my-form').serialize(),(payload, response, responseBody) => {
    console.log(payload)
}, (message, payload, response, responseBody) => {
    if(response.status >= 500) {
        alert(message)        
    }
    else {
        console.log(responseBody)
    }
})

Options

useCatch: bool - (true|false)

Whether to use .catch() on response. Default - false.

errorsHandle: bool - (true|false)

Whether to handle errors or conceal failed requests. Default - true.

errorsHandler: function(message:string)

You can use your own handler for errors! It is a 'global' errors handler for this instance of JSON_Talker, but you can redeclare it in one exact call.

fetchCredentials: string - (omit|same-origin|include)

Native credentials option. Sending cookies and header. Default - same-origin

fetchMode: string - (same-origin|no-cors|cors)

Native mode option. Cross-domain mode. Default - same-origin

fetchCache: string - (default|no-store|reload|no-cache|force-cache|only-if-cached)

Native cache option. Cache type header. Default - no-cache

fetchRedirect: string - (follow|error)

Native redirect option. Whether to follow redirect or create an error. Default - error
Caveat: Using both useCatch:false and fetchRedirect:'error' will cause unhandled response error

fetchHeaders: array

Array of objects, representing headers, that will be sent with the request. Each object should have key and value elements.