An elegant promise based HTTP client for the browser and node.js [WIP]
Clone or download
vaheqelyan
vaheqelyan 0.12.0
Latest commit a198011 Jan 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Save changes Jan 11, 2019
test Add a test Jan 11, 2019
.eslintignore Added test.html Jan 8, 2019
.eslintrc Code formatted Jan 4, 2019
.gitignore Fix untracked files Jan 1, 2019
.prettierrc useTabs/false, printWith/120 Jan 3, 2019
.travis.yml Lint before build Jan 8, 2019
LICENSE Initial commit Dec 27, 2018
README.md Save changes Jan 11, 2019
package-lock.json 0.12.0 Jan 11, 2019
package.json 0.12.0 Jan 11, 2019

README.md

Karin

About

Template literals are very useful. A more advanced form of template literals are tagged templates. Karin works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). Modern browsers and JavaScript engines support tag templates. It is also compatible with Node.js. The package uses the Fetch API, make sure you have a polyfill to support older browsers. Recommend to use github/fetch

e.g.

import React from "react";
import { get } from "karin";

export default class Index extends React.Component {
  static async getInitialProps() {
    const { data } = await get`https://api.github.com/repos/zeit/next.js`;
    return { stars: data.stargazers_count };
  }

  render() {
    return (
      <div>
        <p> {this.props.stars} ⭐️</p>
      </div>
    );
  }
}

Installataion

via NPM

npm i karin

via CDN (unpkg)

https://unpkg.com/karin@latest/build/browser/index.umd.js

UMD library exposed as Karin

const { get, post } = Karin;

Import paths

import { get, post } from "karin/build/node";
import { get, post } from "karin/build/browser/index.umd.js";

Make a get request

The response data - By default, if the response data type is Application/JSON, the response will be parsed into JSON

import { get } from "karin";

get`https://api.github.com/repos/vaheqelyan/karin`
  .then(res => console.log(res))
  .catch(err => console.error(err));

Make a post request

The post data - If the data is an object, it will be stringified

The response data - By default, if the response data type is application/json, the response will be parsed into JSON

Note that the data to be sent is the last item.

import { post } from "karin";

const user = {
  username: "vaheqelyan",
  password: "XXXX"
};

post`http://localhost:3000/register ${user}`
  .then(res => console.log(res))
  .catch(err => console.log(err));

Add Header in HTTP Request

post`https://example.com/api.createMsg?${{apiKey: config.apiKey}}
Content-Type: application/json
Accept: application/json
XXX: xxx

${{
  title: 'Test Message',
  body: 'This is a test of the messaging system.'
}}`

Thanks to Ken Bellows for the idea.

See Version 0.11.1 for old syntax