https://github.com/vaheqelyan/karin

An elegant promise based HTTP client for the browser and node.js [WIP]
https://github.com/vaheqelyan/karin

browser http-client http-requests javascript nodejs

Last synced: 5 days ago
JSON representation

An elegant promise based HTTP client for the browser and node.js [WIP]

• Host: GitHub
• URL: https://github.com/vaheqelyan/karin
• Owner: vaheqelyan
• License: mit
• Created: 2018-12-27T08:27:43.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-09T07:37:01.000Z (almost 6 years ago)
• Last Synced: 2024-11-03T17:38:50.098Z (10 days ago)
• Topics: browser, http-client, http-requests, javascript, nodejs
• Language: JavaScript
• Homepage:
• Size: 1.72 MB
• Stars: 395
• Watchers: 5
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - karin

README

        

# 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](https://github.com/github/fetch)

e.g.

```jsx

import React from "react";

import { get } from "karin";

export default class Index extends React.Component {

  static async getInitialProps() {

    const { data, response } = await get`https://api.github.com/repos/zeit/next.js`;

    return { stars: data.stargazers_count };

  }

  render() {

    return (

      


        
 {this.props.stars} ⭐️

      

    );

  }

}

```


## Installation

**via NPM**

```code

npm i karin

```

**via CDN (unpkg)**

```code

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

```

UMD library exposed as Karin

```js

const { get, post } = Karin;

```

Import paths

```js

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

```js

import { get } from "karin";

get`https://api.github.com/repos/vaheqelyan/karin`

  .then(result => console.log(result))

  .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.

```js

import { post } from "karin";

const user = {

  username: "vaheqelyan",

  password: "XXXX"

};

post`http://localhost:3000/register ${user}`

  .then(result => console.log(result))

  .catch(err => console.log(err));

```

## Add Header in HTTP Request

```js

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](https://dev.to/kenbellows/comment/83m6) for the idea.

See Version [0.11.1](https://github.com/vaheqelyan/karin/tree/v0.11.1) for old syntax