DEV Community

HTTP request with ES6 tagged templates

Vahe on January 09, 2019

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

Read full post

K • Jan 9 '19

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 • Jan 9 '19 • 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

Pascal • Jan 10 '19

Jest is using this in each

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

Ken Bellows • Jan 10 '19 • 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.'
}}
`

Vahe • Jan 10 '19 • Edited

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 • Jan 10 '19

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 • Jan 11 '19

I agree with you

Vahe • Jan 10 '19 • Edited

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

Itachi Uchiha • Jan 10 '19 • 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.

Vahe • Jan 10 '19 • Edited

Even so ?

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

Itachi Uchiha • Jan 10 '19

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 • Jan 10 '19

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

Vahe • Jan 11 '19

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 • Mar 8 '19

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 • Jan 10 '19

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 • Jan 16 '19

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?