Utilities for custom fetch.
npm install create-fetchimport 'cross-fetch/polyfill' // add universal-fetch polyfill if needed import {composeFetch, query, headers, bodify} from 'create-fetch' const myFetch = composeFetch([ query(), bodify(), headers({'x-requested-with': 'fetch'}), ])(fetch) // same as: // const myFetch = compose(query(), ...)(fetch) // could also use pipeline operator: // const myFetch = fetch |> query() |> ... myFetch('/api', { method: 'POST', query: {filter: 'user'}, body: {name: 'JoJo'}, }) // => // POST /api?filter=user // Request Headers: // content-type: application/json // x-requested-with: fetch // Request Payload: // {"name":"JoJo"}import {FetchCompose, FetchEnhancer, query, bodify} from 'create-fetch' import flowRight from 'lodash/flowRight' // inject extra options type FooInit = {foo?: boolean} const foo = (): FetchEnhancer<FooInit> => (fetch) => (url, {foo, ...options}) => { if (foo) { // ... } return fetch(url, options) } const bar = (): FetchEnhancer => (fetch) => (url, options) => { return fetch(url, options) } // same as `composeFetch` const myFetch = (flowRight as FetchCompose)([ // foo(), bar(), query(), bodify(), ])(fetch) // (url: RequestInfo, options?: RequestInit & QueryInit & FooInit) => Promise<Response> myFetch('/', { withEncrypt: true, })Import from module script (1.4K gzip size):
<script type="module"> import createFetch, {query, headers} from 'https://unpkg.com/create-fetch' const myFetch = createFetch(fetch, [ query(), headers({'x-requested-with': 'fetch'}), ]) myFetch('/api', {query: {foo: 'bar'}}) </script>Add default request options.
import {defaults} from 'create-fetch' const myFetch = defaults({ credentials: 'same-origin', })(fetch) myFetch('/')Add request base url.
import {baseUrl} from 'create-fetch' const ghApi = baseUrl('https://api.github.com')(fetch) ghApi('/users') // => // GET https://api.github.com/usersAdd default request headers.
import {headers} from 'create-fetch' const myFetch = headers({ 'x-requested-with': 'fetch', // null or undefined will be removed 'x-foo': null, })(fetch) myFetch('/') // => // GET / // Request Headers: // x-requested-with: fetchStringify query string.
import {query} from 'create-fetch' const myFetch = query()(fetch) myFetch('/', { query: { filter: 'user' // null or undefined will be set to empty foo: null }, }) // => // GET /?filter=user&fooStringify request body.
import {bodify} from 'create-fetch' const myFetch = bodify()(fetch) // stringify json by default myFetch('/', { method: 'POST', body: {name: 'JoJo'}, }) // => // POST / // Request Headers: // content-type: application/json // Request Payload: // {"name":"JoJo"} // stringify form myFetch('/', { method: 'POST', body: new URLSearchParams({name: 'JoJo'}), }) // => // POST / // Request Headers: // content-type: application/x-www-form-urlencoded // Request Payload: // name=JoJoAdd XSRF token header.
import {xsrf} from 'create-fetch' const myFetch = xsrf({ cookieName, // defaults to `_xsrf` headerName, // defaults to `x-xsrftoken` })(fetch) myFetch('/', { method: 'POST', }) // => // POST / // Request Headers: // x-xsrftoken: <xsrf-token>