Home Reference Source

Function

Static Public Summary
public

defaultHeaders(_defaultHeaders: object): function

Add HTTP headers to every fetch
public

Manage interceptors - to do something before or after every fetch.
public

jsonResponse(suppressWarning: boolean): function

Implicitly parse response to json.
public

logger(customLog: function): function

Log request and response.
public

onErrorRetry(options: {maxRetry: number, delayMs: number}): function

Creat a fetch which retries when:

  • GET with 5XX error
  • Network error
public

pipe(fns: ...function)

Use this to create your fetch method by pipe multiple higher-order fetches.

Static Public

public defaultHeaders(_defaultHeaders: object): function source 

import {defaultHeaders} from 'higher-order-fetch/hofs/defaultHeaders.js'

Add HTTP headers to every fetch

Params:

NameTypeAttributeDescription
_defaultHeaders object
  • optional

Return:

function

a fetch-like function

Example:

import {addDefaultHeader, defaultHeaders} from 'higher-order-fetch/hofs/defaultHeaders'

const fetch = defaultHeaders({
 "Content-Type": "application/json",
})(window.fetch)

// assume login success:
addDefaultHeader('Authorization', 'Basic Ym9zY236Ym9zY28=')

// below request should have 2 headers added from above:
fetch('http://example.com/data')
.then(response => response.json())
.then(data => { ... })

public interceptor() source 

import {interceptor} from 'higher-order-fetch/hofs/interceptor.js'

Manage interceptors - to do something before or after every fetch. Use this with addBeforeRequestInterceptor and addAfterResonseInterceptor

Example:

import {
 addBeforeRequestInterceptor,
 addAfterResonseInterceptor,
 interceptor
} from 'higher-order-fetch/hofs/interceptor'

const fetch = interceptor()(window.fetch)

addBeforeRequestInterceptor(() => {
 Loader.show()
})
addAfterResonseInterceptor(() => {
 Loader.hide()
})

fetch('http://my.url/data')
.then(response => response.json())
.then(data => {...})

public jsonResponse(suppressWarning: boolean): function source 

import {jsonResponse} from 'higher-order-fetch/hofs/jsonResponse.js'

Implicitly parse response to json. The fetch created by this will resolve an array of [jsonData, statusCode]

Params:

NameTypeAttributeDescription
suppressWarning boolean

If true, no error will be logged when request error or parse JSON fail.

Return:

function

a fetch-like function

Example:

import {jsonResponse} from 'higher-order-fetch/hofs/jsonResponse'
const fetch = jsonResponse()(window.fetch)

fetch('http://example.com/data')
.then(([data, status]) => {// no need to call `response.json()` here
// `data` is a JSON object only if fetch data success with JSON data,
// otherwise, it is either a Response or an Error.
// `status` is either HTTP Status Code or `undefined` if fetch fail.
})

public logger(customLog: function): function source 

import {logger} from 'higher-order-fetch/hofs/logger.js'

Log request and response.

Params:

NameTypeAttributeDescription
customLog function

Your custom logger

Return:

function

A fetch-like function

public onErrorRetry(options: {maxRetry: number, delayMs: number}): function source 

import {onErrorRetry} from 'higher-order-fetch/hofs/onErrorRetry.js'

Creat a fetch which retries when:

  • GET with 5XX error
  • Network error

Before import this, you have to install rxjs to your project:

npm install rxjs

Params:

NameTypeAttributeDescription
options {maxRetry: number, delayMs: number}
  • optional

Return:

function

a fetch-like function

Example:

import {onErrorRetry} from 'higher-order-fetch/hofs/onErrorRetry'

const fetch = onErrorRetry({
 maxRetry: 5,
 delayMs: 3000
})(window.fetch)

fetch('http://example.com')// if request error, will retry maximum 5 times before resolve
.then(response => {
 // `response` is the last response after all retries or success.
})

public pipe(fns: ...function) source 

import pipe from 'higher-order-fetch/utils/pipe.js'

Use this to create your fetch method by pipe multiple higher-order fetches.

Params:

NameTypeAttributeDescription
fns ...function

Example:

import pipe from 'higher-order-fetch/utils/pipe'

const doThis = fetch => (...fetchParams) => {
 // [do this stuff...]
 return fetch(...fetchParams)
}
const doThat = fetch => async (...fetchParams) => {
 const response = await fetch(...fetchParams)
 // [do that stuff...]
 return response
}

const fetch = pipe(
 doThis,
 doThat
)(window.fetch)

fetch('http://example.com/data').then(response => {...})

See: