Skip to content
An enhanced HTTP client based on fetch.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.babelrc
.editorconfig
.eslintrc.json
.gitignore
karma.conf.js
license.md
mocha.conf.js
mocha.opts
package.json
readme.md
webpack.config.js
webpack.karma.config.js

readme.md

fetch-it

An enhanced HTTP client based on fetch.

Blogpost: [fetch-it an enhanced http client based on fetch] (http://blog.tryolabs.com/2016/03/02/fetch-it-enhanced-http-client-based-on-fetch/)

Features

You can do all the same thing that you do with fetch, plus:

  • Add middleware, to intercept requests and responses
  • Create custom config instances

Installation

using npm:

$ npm install --save fetch-it

Examples

GET request

fetchIt.get('http://httpbin.org/get?param1=param1')
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

POST request

fetchIt.post('http://httpbin.org/post?param1=param1', {
  param2: 'param2',
  param3: 'param3'
}).then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

API

Request methods

fetchIt.fetch(url[, options])

fetchIt.fetch(request)

You can perform requests the same way as you do with fetch().

fetchIt.fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
}).then((response) => {
  // handle response
}).catch((error) => {
  // handle error
});

And we provide some convenience aliases for the supported methods.

fetchIt.get(url[, options])

fetchIt.get(request)

fetchIt.post(url[, data[, options]])

fetchIt.post(request)

fetchIt.put(url[, data[, options]])

fetchIt.put(request)

fetchIt.patch(url[, data[, options]])

fetchIt.patch(request)

fetchIt.delete(url[, options])

fetchIt.delete(request)

fetchIt.head(url[, options])

fetchIt.head(request)

Creating custom config instances

You can create a custom config instance of fetchIt

fetchIt.create([options])

let apiFetch = fetchIt.create({
  headers: {
    'Authorization': 'Bearer ' + getAPIToken(),
    'X-My-Custom-Header': 'CustomHeader'
  }
});

apiFetch.get(url).then((response) => {
  // handle response
}).catch((error) => {
  // handle error
});

Middleware

You can add middleware objects to any instance, to intercept requests and responses.

The middleware object must have defined at least one of these methods:

  • request(request), to intercept a request,
  • requestError(error), to intercept an error from a previous middleware,
  • response(response), to intercept a response,
  • responseError(error), to intercept an error from a previous middleware.
let jsonMiddleware = {
  response(res) {
    return res.json().catch((e) => {
      return e;
    });
  }
};

fetchIt.addMiddlewares(ArrayOfMiddlewares)

fetchIt.addMiddlewares([jsonMiddleware]);

fetchIt.clearMiddlewares()

Roadmap

  • Better docs
  • Add more middlewares
  • Add better tests
  • Add travis and coveralls
  • Create another project to create something similar to $resource based on fetch-it.

Credits

fetchIt is heavily based on Axios, but based on fetch().

License

MIT © Tryolabs

You can’t perform that action at this time.