Neutron Polarization Manipulator
    Wondering what’s next for npm?Check out our public roadmap! »

    reacthttp

    1.0.0 • Public • Published

    React Http

    Build Status Coverage Status npm version bower version npm

    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

    npm

    Install

    npm i reacthttp

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar