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
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>
);
}
}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, karin } from "karin/build/node";
import { get, post, karin } from "karin/build/browser/index.umd.js";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));const user = "vahe";
const count = 123;
const filter = true;
get`http://domain.com/user${user}`;
// http://domain.com/user/vahe
get`http://domain.com/user${user}filter${filter}count${count}`;
// http://domain.com/user/vahe/filter/true/count/123
get`http://domain.com/path${{
user,
filter,
count
}}`;
// http://domain.com/path/user/vaheqelyan/filter/true/count/123
const sub = "api.";
get`http://${sub}domain/${{ foo: "bar" }}`;
// Also works http://api.domain.com/foo/bar
get`htpp://domain.com/search/?${{ text: "a", lr: 10262 }}`;
// http://domain.com/search/?text=your query&lr=10262The 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));--json --blob --arrbuf --text
get`<URL> --text`;
// •> ▶︎ Promise {<pending>}--content-json ― application/json
--content-x - application/x-www-form-urlencoded
WIP...
Set Request Header
post({ headers: { XXX: "xxx" } })`<URL> ${{}}`;Set URL origin
const github = get({ origin: "https://api.github.com" });
github`/users/vaheqelyan`;
// •> ▶︎ Promise {<pending>}import { karin } from "karin";
const domain = karin.create({
origin: "...",
headers: {
/**/
}
});
domain.post``;
domain.get``;