HTTP request with ES6 tagged templates

ES6 template literals are one of my favorite features in es6. A few days ago I saw an open source project on github - htm, there are also hyperHTML and, possibly, several other projects also.And I decided to create such a thing to perform AJAX requests.

By the way, package uses node-fetch for node.js and whatwg-fetch for client javascript

Source in github vaheqelyan/karin

Do you think this is a good idea ?

Comments

[K]

Nice.

A few years ago I read somebody talking about the fact that templates can be used as an alternative function syntax. I found this quite funny. Why would anyone do this to save two characters?

It turns out, many things in JavaScript are already done with strings and the fact that these are string templates and not just plain strings makes them rather powerful and with Babel plugins they can be converted to regular function calls before hitting production.

[K]

I started a awesome list for this kind of stuff, maybe this will become more of a thing in the future :D

awesome-tagged-templates

[Pascal]

Jest is using this in each

See point 2:
jestjs.io/docs/en/api#testeachtabl...

[Ken Bellows]

Huge fan of the idea! I'd love to see it accept something like the usual HTTP request format, with headers on the line below the URL, then a blank line, then a request body if there is one. I'd also love to see support for converting an object into query parameters, maybe even an object for additional headers, etc.

This request:

POST https://example.com/api/createMsg?apiKey=ABC123
Content-Type: application/json
Accept: application/json

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

could be made like this:

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

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

[Vahe]

But what about this

post`https://example.com/api.createMsg?${{apiKey: config.apiKey}} --content-json --accept-json`

Perhaps we can include both examples?

[Ken Bellows]

All depends on how complex you want your parser to be, I guess. Personally I'm not sold on a shell-command-like format, especially considering that it would be kind of annoying to build that string in JS I think. Would you specify just certain header options that can be specified with this shorthand?

I personally like the Header-Name: header-value syntax because it's very easy to parse into an Object, and its very easy to serialize an Object into that format. But it's all subjective; it's just a prototype, right? Have fun with it, try it out, use it for a project, see what you like and dislike

[Vahe]

I agree with you

[Vahe]

Wow.it will look really good.maybe I should rethink and rewrite?

[Itachi Uchiha]

Omg. I never heard this before. But I think this isn't a good feature. This look like a Ruby' method calling.

In the Ruby Programming Language you can like this;

def method_name (var1 = value1, var2 = value2)
   # expressions
end

method_name 25, 30

I realized now, you can use this feature also in the JavaScript.

fetch`https://api.github.com`
  .then(resp => resp.json())
  .then(obj => console.log(obj))

I think that feature decreasing the readability in the JavaScript. Maybe some people disagree with me.

[Vahe]

Even so ?

async function getUser(user) {
  const { data } = await get`https://api.github.com/users/${user}`;
}

[Itachi Uchiha]

Using:

getUser`vahe`

I don't want to misunderstand. This post so informative. Thanks for this. I just don't like this syntax :D

But this syntax acceptable. Which means, we'll use some libraries that use this syntax.

[Vahe]

async function getUser(user) {
  const { data } = await get`https://api.github.com/users/${user}`;
  return data;
}
getUser("google").then(res => {
  console.log(res);
});

[Vahe]

In my opinion, this syntax is more valid

import {post} from 'karin'

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

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

Thanks to Ken Bellows for the idea

[Rodney Reid]

I personally like it! A couple years back when I proposed this on reddit/r/javascript (I think I was using it with a logging library), I got a lot of backlash - people are resistant to change.

[Phil Nash]

I think this is really interesting use of the syntax. I need to do some experiments with tagged template literals so that I can come up with cool stuff like this!

[Gibran Malheiros]

I don't think it was a good idea, looks like normal function calls, but with extra steps.
I fail to perceive any value in this, is it even solving any problem?