2018-10-12 admin


什么是rek,Wrapper around the Fetch API



Wrapper around the Fetch API, mainly meant for consuming JSON api’s but exposes a factory function for creating defaults for XML api’s or what not.



$ npm install rek


<script src=""></script>

<!-- OR -->

<script src=""></script>


While the Fetch API is significantly nicer to work with than XHR, it still quickly becomes verbose to do simple tasks. rek is simply meant as wrapper around Fetch with editable defaults that provides methods for working against the standard HTTP methods.

To create a relatively simple POST request using JSON, you often have to write something like:

fetch('/api/peeps', {
  method: 'POST',
  body: JSON.stringify({
    name: 'James Brown',
  credentials: 'same-origin',
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'content-type': 'application/json',
    accept: 'application/json',
}).then((res) => {
  const contentType = res.headers.get('content-type')

  if (res.ok) {
    return res.json()

  // request errored, handle
  return res.json().then((json) => {
    const err = json.error || json.err || json

    throw Object.assign(new Error(err.message), omit(err, 'message'))
}).then((person) => {
  console.log(, person.createdAt)

With rek this simply becomes:

import { post } from 'rek'

post('/api/peeps', { name: 'James Brown' }).then((person) => {
  console.log(, person.createdAt)

Browsers (CommonJS and ESM) and Node supported

If using Node, make sure to install the optional dependency node-fetch.


rek defines defaults that are used for every request. If you pass an options object to any of reks methods that options object will be merge with the defaults.

The defaults are defined as follows:

let defaults = {
  method: 'GET',
  headers: {
    'content-type': 'application/json',
    accept: 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  credentials: 'same-origin'

See the factory section below for setting custom defaults.


Named exports

  • del: make a request using the DELETE method
  • factory: returns an object containing all methods with new default options and optionally another responder
  • get: make a request using the GET method
  • patch: make a request using PATCH method
  • post: make a request using POST method

Default export

The default export is the bare rek function, but with all other named exports added as properties.


All methods are exported as named exports, and as properties on a default export.

Named exports:

import { get, post } from 'rek'

get('/api/peeps').then((users) => {

post('/api/peeps', { name: 'James Brown' }).then((user) => {
  console.log(, user.createdAt)

Default export:

import rek from 'rek'

// the default http method in the initial defaults is 'GET', ie
// out of the box the regular `rek` function is equivalent to `rek.get`
rek('/api/peeps').then((users) => {

rek.get('/api/peeps').then((users) => {
})'/api/peeps', { name: 'James Brown' }).then((user) => {
  console.log(, user.createdAt)


factory(defaults, shouldMerge, responder)

shouldMerge decides whether to merge the passed in defaults with original defaults. Pass responder to use custom responder instead of the provided.

import { factory } from 'rek'

// the first call to factory will merge with initial defaults
const rek = factory({
  headers: {
    'content-type': 'application/x-www-form-urlencoded',
    accept: 'application/html',
    'X-Requested-With': 'XMLHttpRequest',
  credentials: 'omit',
}, true)

const { del, get, patch, post } = rek

// the following will merge newDefaults with the latest
// defaults, not initial defaults
const another = rek.factory(newDefaults, true)


import defaultRek from 'rek'

const rek = defaultRek.factory(defaults)
const { factory, del, get, patch, post } = rek

The factory will return a new rek function with it’s own factory. Calling this returned factory will merge defaults with previous factories defaults.

The responder

The responder uses the headers to decide what to do with the response from server.

See src/responder.js for implementation details.


Very big thank you to kolodny for releasing the NPM name!


转载请注明:文章转载自 JavaScript中文网 []