Package Exports

@sifrr/fetch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sifrr/fetch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sifrr-fetch ·

Fetch API and websockets API based small, easy to use, promise based requests library for browsers.

Size

Type	Size
Normal (`dist/sifrr.fetch.js`)
Minified (`dist/sifrr.fetch.min.js`)
Minified + Gzipped (`dist/sifrr.fetch.min.js`)

How to use

Directly in Browser using standalone distribution

Add script tag in your website.

<script src="https://unpkg.com/@sifrr/fetch@{version}/dist/sifrr.fetch.min.js"></script>

Browser API support needed for

APIs	caniuse	polyfills
Fetch API	https://caniuse.com/#feat=fetch	https://github.com/github/fetch
Promises API	https://caniuse.com/#feat=promises	https://github.com/stefanpenner/es6-promise

Using npm

Do npm i @sifrr/fetch or yarn add @sifrr/fetch or add the package to your package.json file.

example, put in your frontend js module (compatible with webpack/rollup/etc):

Commonjs

window.Sifrr = window.Sifrr || {};
window.Sifrr.Fetch = require('@sifrr/fetch');

ES modules

import Fetch from '@sifrr/fetch';
window.Sifrr = window.Sifrr || {};
window.Sifrr.Fetch = Fetch;

API

HTTP Requests

options are Fetch API options with some extra keys:

params json object key, value pairs will be added to url as ?key=value

GET request

you can add query parameters to get request options.

options.query = { key: 'value' }
Sifrr.Fetch.get(url, options).then((response) => {
  // This will send request to url?key=value
  // response is JSON if response has `content-type: application/json` header
  // else it is a Fetch API response object.
});

PUT request

Sifrr.Fetch.put(url, options).then((response) => {
  // response is JSON if response has `content-type: application/json` header
  // else it is a Fetch API response object.
});

POST request

you can add post request body parameters to post request options.

options.body = { key: 'value' };
options.headers = {
  'content-type': 'aaplication/json'
}
Sifrr.Fetch.post(url, options).then((response) => {
  // response is JSON if response has `content-type: application/json` header
  // else it is a Fetch API response object.
});

DELETE request

Sifrr.Fetch.delete(url, options).then((response) => {
  // response is JSON if response has `content-type: application/json` header
  // else it is a Fetch API response object.
});

GET file request

Sifrr.Fetch.file(url, options).then((response) => {
  // response is a Fetch API response object.
  // You can get file text content using response.text() or other fetch response methods
});

GRAPHQL request

graphql request is a POST request.

Sifrr.Fetch.graphql(url, { query: 'graphql query string', variables: { a: 'b' }, ...otherOptions})
  .then((response) => {
    // response is JSON if response has `content-type: application/json` header
    // else it is a Fetch API response object.
  });

Sockets

Note: Only works with JSON messages/responses

// Open a socket
const socket = Sifrr.Fetch.socket(url, protocols, fallback /* { url: 'fallback url', method: 'fallback method' } */);
// send a message
socket.send(message).then(resp => {
  // do something
});

// Server will receive data as:
// {
//   sifrrRequestId: Int,
//   data: message
// },
// and should send back
// {
// sifrrRequestId: same id as received
// data: response
// }
// then resp will be equal to response sent above

@sifrr/fetch