@0y0/request ·

@0y0/request is a tiny window.fetch wrapper tried to make HTTP request code more readable and more easy to write.

Before

fetch('/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
    'Authorization': 'Bearer this-is-user-token'
  },
  body: JSON.stringify({
    email: '[email protected]',
    name: 'bar'
  })
}).then(handleResponse, handleError)

After

Request
  .post('/users/1')
  .bearer('this-is-user-token')
  .jsonBody({ email: '[email protected]', name: 'bar' })
  .then(handleResponse, handleError)

Installation

npm install @0y0/request --save

import Request from '@0y0/request'

As an alternative to using npm, you can use @0y0/request as a <script> tag from a CDN. You will also need Promise polyfill and fetch polyfill for old browsers (Check out compatibility at caniuse/Promises and caniuse/fetch).

<!--
Use promise-polyfill and whatwg-fetch only if you want to support old browsers.
Check out Promise and fetch compatibility at http://caniuse.com.
-->
<script src="https://unpkg.com/promise-polyfill"></script>
<script src="https://unpkg.com/whatwg-fetch"></script>
<script src="https://unpkg.com/@0y0/request/dist/request.min.js"></script>
<script>Request.get('http://...')</script>

Usage

Send a request

Reqeust.get('/api')
Reqeust.post('/api')
Reqeust.put('/api')
Reqeust.delete('/api')

Set HTTP header

// headers: { foo: 'bar' }
Request.get('/api').header('foo', 'bar')

// headers: { Authorization: 'bar' }
Request.get('/api').auth('bar')

// headers: { Authorization: 'Bearer token' }
Request.get('/api').bearer('token')

// headers: { foo1: 'bar1', Authorization: 'token' }
Request.get('/api')
  .header('foo1', 'bar1')
  .header('foo2', undefined)
  .auth('token')

Set URL parameters

// url: /api/?foo=bar
Request.get('/api').param('foo', 'bar')

// url: /api/?foo2=bar2
Request.get('/api').param('foo1', undefined).param('foo2', 'bar2')

// url: /api/?foo1=bar1&foo2=bar2
Request.get('/api').params({ foo1: 'bar1', foo2: 'bar2' })

Set request body

Request.post('/api').body('content')

// Content-Type: application/json
Request.post('/api').jsonBody({ foo: 'bar' })

// Content-Type: multipart/form-data
Request.post('/api').formBody({ foo: 'bar' })

// Content-Type: application/x-www-form-urlencoded;charset=UTF-8
Request.post('/api').urlencodedFormBody({ foo: 'bar' })

Handle JSON response

Request.get('/api').acceptJson()

Browser Support

• Chrome
• Firefox
• Safari 10.1+
• IE 10+ (Should use with Promise, fetch, URL, URLSearchParams and FormData polyfills)

License

MIT