DEV Community

Cover image for HTTP request with ES6 tagged templates
Vahe
Vahe

Posted on

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 ?

Top comments (16)

Collapse
 
kayis profile image
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.

Collapse
 
kayis profile image
K • Edited

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

Collapse
 
herrfugbaum profile image
Pascal

Jest is using this in each

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

Collapse
 
kenbellows profile image
Ken Bellows • Edited

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.'
}}
`
Collapse
 
vaheqelyan profile image
Vahe • Edited

But what about this

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

Perhaps we can include both examples?

Collapse
 
kenbellows profile image
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

Thread Thread
 
vaheqelyan profile image
Vahe

I agree with you

Collapse
 
vaheqelyan profile image
Vahe • Edited

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

Collapse
 
itachiuchiha profile image
Itachi Uchiha • Edited

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.

Collapse
 
vaheqelyan profile image
Vahe • Edited

Even so ?

async function getUser(user) {
  const { data } = await get`https://api.github.com/users/${user}`;
}
Collapse
 
itachiuchiha profile image
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.

Thread Thread
 
vaheqelyan profile image
Vahe
async function getUser(user) {
  const { data } = await get`https://api.github.com/users/${user}`;
  return data;
}
getUser("google").then(res => {
  console.log(res);
});
Collapse
 
vaheqelyan profile image
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

Collapse
 
rodneyreid profile image
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.

Collapse
 
philnash profile image
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!

Collapse
 
gibatronic profile image
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?