Wrapping my head around `xhr` solutions

help
1

Hi everyone,

Could you please let me know if my understanding is wrong about these?

  • http package is deprecated.
  • jkuester:http is bridging a gap where some support is added to help the transition between using HTTP and fetch.
  • For new projects though, this means we are better off using fetch for all our xhr calls?

This leaves me with a couple questions:

  • Is axios a good alternative server side? I experienced some issues and this led me to look closer into perhaps using http or fetch Fixed my issue but still.

  • If I wanted a promised based syntax for HTTP I’d need to wrap that myself, otherwise the only way to use it is via callbacks?

  • Is there any wrapper package for fetch that makes it feel more like axios or similar? (This one is not a huge deal, just curious)

    fetch('some-endpoint-url', {
  method: 'POST',
  body: {
    some: 'data'
  };
})

    Feels awkward coming from

    axios.post('some-endpoint-url', {
  some: 'data'
})
2

axios is a porsche and fetch is a ford. They will both get you there. I played with axios but there is a learning curve. It does a lot of cool stuff, especially transformers, but in the end, I was in a hurry to get rid of request and it was easier for me to use fetch at the cost of more verbose code. The one thing I can say about fetch is that while you have to write more code, its obvious what you are doing, whereas axios, like request, does a lot of work behind the scenes. I am still pissed about request so I felt that fetch, being a standard, reduces the likelihood I have to do another rewrite in the future if the maintainers decide to deprecate it because it isn’t cool anymore.

3

You can learn more about fetch on MDN:

The fetch package ensures that it works for you both on server and client without you needing to worry about polyfills and such.

3 Likes
4

Hey @ackzell … I’ve used both fetch and axios on the server and the client and they both get the job done.

I’m always using them inside an async Meteor method on the server.

Meteor.methods({

  async "get.nodes"() {
    let url = "https://example.nodes.com";

    try {
      let nodesResponse = await axios.get(url);
      let totalNodes = nodesResponse.data.results[0].total_nodes;
      return totalNodes;
    } catch (error) {
      // return error to handle a failure
      return error;
    }

  }

});

Probably you’ll be happier with axios for most scenarios. Also axios works on the client, I’ve also used it inside Vue on the client, so you can copy paste your code if you run some HTTP request on the client vs server.

7

Thanks everyone!

Yes, I agree fetch would be a safer bet for the future. @bogometer

Given that axios has existed for quite a long time and still is maintained I think is what I’ll go for. I also prefer the ergonomics of the syntax. Coming from AngularJS’ http this makes sense to me.

I was aware of this being a platform API @storyteller, but was wondering if any special integration that I could get more out of was available for Meteor. Good point that it is available both client and server side :+1:

Yeah, @mullojo this is what I ended up using. I think I prefer the syntax and the availability. It kind of presented the best of both worlds to me. I was just looking for “the recommended” way to handle these calls in the Guide but could not find it.

8

For the server side, you might find this comparison useful got - npm

9

Pretty cool! Thanks for sharing. I wonder if there is anything Sindre is not involved in and that is high quality :sweat_smile:

ky looks pretty good too.