React Http

React Http is built on top of fetch for browser side and node-fetch for server side. It provides an lightweight and fancy way to interact with backend REST API.

ReactHttp provides 5 basic method of REST API: POST, GET, PATCH, DELETE, PUT and new method sendFiles for upload file.

Installation

• With npm: npm install reacthttp
• With bower: bower install reacthttp
• cdnjs

Usage

Basic usage

import ReactHttp from "reacthttp";

// Get method
ReactHttp.get("http://url")
 .then(data => {
   console.log(data);
 })
 .catch(error => {
   console.log(error);
 })
// Post method
ReactHttp.post("http://url", {foo: "bar"})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.log(error);
})

// Upload file
var input = document.querySelector('input[type="file"]')
ReactHttp.sendFiles("http://url", {file: input.files[0]})
 .then(data => {
   console.log(data);
 })
 .catch(error => {
   console.log(error);
 })

With URL Search Params

UrlSearchParams supports all method of ReactHttp

import ReactHttp, { UrlSearchParams } from "reacthttp";
let searchParams = new UrlSearchParams();
searchParams.append("page", 1);
searchParams.append("order_by", "title")
// Send request
ReactHttp.get("http://url", searchParams)
    .then()

Custome Header

By default, ReactHttp's header

let defaultHeaderOptions = {  
  'Accept': 'application/json',
  'Content-Type': 'application/json'
};

You can add or modify global headers by setHeader function

import ReactHttp, { setHeader } from "reacthttp";
// custom header, if you want to override default header, just add it.
const customHeader = {
    Authorization: "Bearer askjdhui2343asdfjkhadsf",
    // Want to override
    Content-Type: ...
};
// change global header
setHeader(customHeader);
// Now ReactHttp will use new custom header

Modify header for only one request

import ReactHttp from "reacthttp";
const headerOptions = {
    Authorization: "Bearer askjdhui2343asdfjkhadsf",
};
ReactHttp.get("http://url", null, headerOptions)
    .then()

API

ReactHttp.get(url, urlSearchParams, customHeader);

ReactHttp.post(url, body, urlSearchParams, customHeader);

ReactHttp.put(url, body, urlSearchParams, customHeader);

ReactHttp.patch(url, body, urlSearchParams, customHeader);

ReactHttp.delete(url, urlSearchParams, customHeader);

ReactHttp.sendFiles(url, fileObj, urlSearchParams, customHeader);

setHeader(options);

options is a pure js object.

Default sendfiles Content-Type is multipart/form-data urlSearchParams is an instance of UrlSearchParams class

customHeader is an js object with key is a Http Header Field.

Examples

See examples

Liscense