JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Fetchival

    window.fetch wrapper for writing simple and expressive requests
    Filed under  › 

    • 🔾24%Overall
    • 519
    • 49.6 days
    • 🕩34
    • 👥9

    fetchival.js Travis

    Makes writing JSON requests with fetch easier

    Fetchival is a tiny (0.5kb min/gz) fetch wrapper that can be used in the browser (IE9+) and Node.

    Before

    // POST /users
    fetch('/users', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: 'Typicode',
        login: 'typicode',
      })
    })
    .then(function(response) {
      if (response.status >= 200 && response.status < 300) {
        return response.json()
      }
      throw new Error(response.statusText)
    })
    .then(function(json) {
      // ...
    })
    

    After

    // POST /users
    fetchival('/users').post({
      name: 'Typicode',
      login: 'typicode'
    })
    .then(function(json) {
      // ...
    })
    

    .get(), .put(), .patch() and .delete() methods are also available.

    Installation

    Fetchival is available on Bower and npm

    Browser

    bower install es6-promise fetch # polyfills
    bower install fetchival
    
    npm install es6-promise whatwg-fetch --save # polyfills
    npm install fetchival --save # Browserify
    

    Node

    npm install node-fetch fetchival --save
    

    Usage examples

    var posts = fetchival('/posts')
    
    //posts
    posts.get()
    posts.post({ title: 'Fetchival' })
    
    //posts?category=javascript
    posts.get({ category: 'javascript' })
    
    //posts/1
    posts(1).get()
    posts(1).put({ title: 'Fetchival is simple' })
    posts(1).patch({ title: 'Fetchival is simple' })
    posts(1).delete()
    
    var comments = posts('1/comments')
    
    //posts/1/comments
    comments.get()
    
    //posts/1/comments/1
    comments(1).get()
    

    You can also pass fetch options to fetchival()

    var posts = fetchival('/posts', fetchOptions)
    var comments = posts('1/comments') // Will inherit fetchOptions
    

    To catch errors

    fetchival('/posts')
      .get()
      .catch(function(err) {
        console.log(err)
      })
    

    To enable CORS

    var request = fetchival('/', { mode: 'cors' })
    var posts = request('posts')
    

    To fetch plain text (for example, HTML views)

    var request = fetchival('/', { responseAs: 'text' })
    var posts = request('posts')
    

    responseAs can be response, text or json (default)

    To use fetchival in Node, you need to install node-fetch and configure fetchival to use it

    var fetchival = require('fetchival')
    fetchival.fetch = require('node-fetch')
    

    Browser Support

    Chrome Firefox IE Opera Safari
    Latest ✔ Latest ✔ 9+ ✔ Latest ✔ 6.1+ ✔

    License

    MIT - Typicode

    Show All