fetch-rails
wrapper fetch with rails CSRF token.
Last updated 10 months ago by miguemasx .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install fetch-rails 
SYNC missed versions from official npm registry.

fetch-rails

dockerize Use GitHub's fetch library with Ruby on Rails. Based heavily on this wrapper to encapsulate some of the callback handling of HTTP status codes.

Installation

npm install fetch-rails --save

Javascript vainilla

  • All responses in JSON
fetch(url, options).then((response) => response.json()).catch((response) => response.json())
  • GET with params
// params = { q: { name: "Jhon" } }
fetch("apiUrl?q%5Bname%5D=Jhon", options).then((response) => response.json()).catch((response) => response.json())

  • POST, PUT, DELETE request
fetch(url, {
  method: 'POST',
  body: JSON.stringify(body),
}).then((response) => response.json()).catch((response) => response.json())

With fetch-rails, it's more simple and you can getCSRF, encodeParams, checkStatus, set default json headers, set default credentials, and you can override all of this.

global override

import Fetch from "fetch-rails"
Fetch.defaultHeaders = () => ({
  "X-Requested-With": 'XMLHttpRequest',
  'Accept': 'application/json',
  'Content-Type': 'application/json',
  'Authorization': 'Bearer 1234',
})

or override by request

import Fetch from "fetch-rails"
Fetch.json("apiUrl", {}, {headers: { ...Fetch.defaultHeadersJSON, "Authorization": 'Bearer 1234'} })

Usage

JSON GET request

Fetch.json('https://jsonplaceholder.typicode.com/posts')
  .then( function( posts ){
    console.log( posts ) // response in json
  });

Send params without encoding

Fetch.json('https://jsonplaceholder.typicode.com/posts', { search: { name: "Jhon" }})
  .then( function( posts ){
    console.log( posts ) // response in json
  });

JSON POST request

Fetch.postJSON('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then( function( response ){
    console.log(response) // response in json
  }).catch( function( error ){
    console.log(error) // error in json
  });

JSON PUT request

Fetch.putJSON('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then( function( response ){
    console.log(response) // response in json
  }).catch( function( error ){
    console.log( error ) // error in json
  });

JSON DELETE request

Fetch.deleteJSON('https://jsonplaceholder.typicode.com/posts')
  .then( function( response ){
    console.log(response) // response in json
  }).catch( function( error ){
    console.log(error) // error in json
  });

HTML GET request

Fetch.html('/api/get-html')
  .then( function( response ){
    document.body.innerHTML = response.data;
  });

Text GET request

Fetch.text('/api/get-text')
  .then( function( text ){
    document.querySelector('.item').innerText = text;
  });

Fetch.checkStatus

The checkStatus function return a Promise and parse the error in json.

  import Fetch from 'fetch-rails'

  Fetch.postJSON('/comment', comment)
  .then( (comment) => {
    console.log(comment) // { text: "Hi" }
  })
  .catch( (errors) => {
    console.log(errors)  // { text: ["can't be blank] }
  })

  function checkStatus(response) {
    return new Promise( (resolve, reject) => {
      if(response.status >= 200 && response.status < 300) {
        resolve(response)
      }else {
        response.json().then( (response_json) => {
          reject(response_json)
        })
      }
    })
  }

You can override checkStatus function like this

  import Fetch from 'fetch-rails'

  Fetch.checkStatus = myFunction

Support

Rails

  • Rails 4.0+

Browsers

  • Chrome latest
  • Safari latest
  • Firefox latest
  • Opera latest
  • IE 9+
  • Safari mobile latest
  • Chrome mobile latest

Current Tags

  • 0.8.1                                ...           latest (10 months ago)

15 Versions

  • 0.8.1                                ...           10 months ago
  • 0.8.0                                ...           10 months ago
  • 0.7.0                                ...           10 months ago
  • 0.6.0                                ...           a year ago
  • 0.5.4                                ...           2 years ago
  • 0.5.3                                ...           2 years ago
  • 0.5.2                                ...           2 years ago
  • 0.5.1                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 15
Dependencies (0)
None
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |