Best Practices and Resources for Asynchronous Javascript

i've been reading a lot from stack overflow and a book called"You Don't Know Javascipt" (which is a fantastic book series btw by kyle simpson) but im still struggling with asynchronous ajax scripting. Does anyome have any reaources for asynch js coding and promises? Im trying to pull jsons from apis and parse the data to assemble the next url for the next api call and do it in order (as one does) and im having a lot of difficulty. This kind of stuff is so central to the web i want to just make sure im not shooting myself in the foot when i code these calls. Any and all help and recommendations would be greatly appreciated thanks!

Try the fetch API.

Also the async/await feature of JS (ES2017) will be a great help. (Please compare here)

PS: Please notice, the latest features will only be available in the latest browser versions (see here). If you want to support older browsers you need to transpile and/or polyfill you code.

Thanks a ton for the polyfill link! I've been reading about and experimenting a lot with promises and async/await. I am interested in your thoughts: To me it seems like promises are a lot more flexible because they are objects as opposed to functions stored in variables (as one would use an async function in many cases to allow for flexibility with the process). It also seems to me that promises are probably better for working with legacy code (going in and dismantling callback hell pyramids and replacing with promises) as it seems to be easier to replace those nested callbacks with promises in functional chunks. What are your thoughts?

Yes, Promises are definitely the solution for callback hell and legacy code (see promisify). But keep in mind that async/await don't add something new. They extend the Promise functionality. A async function returns nothing else than a Promis and the await keyword is waiting for the resolve of a Promise.

It makes sense to only use plain Promises if you working in non ES2017 environments (older Browsers) so you can skip the transpilation step.

When I use async/await, I mostly combine it with plain Promise techniques (for example `Promise.all()` for parallel execution). So I get the best of both worlds. A lot of people surely would say it is a bad code style, but in my opinion it is simply effective.

I use POSTMAN to check my API before testing any code in Angular JS, just to make sure I am getting what I expect in response.

HTH

Thanks for the comment! Researching Postman currently.

A simple native Javascript solution for your use case would be

fetch('url1').then(res1 => {
    const {urlParam} = res.url; // if url is an object
    const url2= `construct_your_url_here_${urlParam}`;
    return url2
}).then(newUrl => {
    fetch(newUrl).then()
})

In more concise ES6 way

fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  .then(githubUser => {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);
    setTimeout(() => img.remove(), 3000);
  });

More reading - javascript.info/promise-chaining

Hey, I don't know if this is still the newest way to do it, but putting everything in an async series function is a good way to do this.

Here's a working example - github.com/spsiddarthan/comment-syncer-api/blob/m…

This is a very interesting example. Can I ask if there is a reason for defining the post function before defining the establishQueueConnection function? In my mind I would do the opposite seeing the post function calls establishQueueConnection. So my question is: How do you reason about the order in which you define functions? When you are organizing your callbacks and async functions, how do you decide to order them in the way that you do? Thanks for teaching me !

Alex, I am not defining the post function before the establishQueueConnection. I am just declaring them. In JavaScript, declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked, unlike in say C or C++. So, the order of writing them doesn't matter in JavaScript, the order in which you invoke them matters.

thanks for clearing that up! @Siddarthan Sarumathi Pandian

Thread

Best Practices and Resources for Asynchronous Javascript

Responses(4)

Recent threads

Search Hashnode

Best Practices and Resources for Asynchronous Javascript

Responses(4)

Recent threads