DEV Community

Discussion on: JavaScript: Promises and Why Async/Await Wins the Battle

Collapse
 
nepeckman profile image
nepeckman • Edited

I think you aren't giving promises enough credit, and I'd like to address your points one by one.

Async/Await allows for a clean and concise codebase with fewer lines of code, less typing, and fewer errors. Ultimately, it makes complicated, nested code readable again.

This was the most problematic claim for me. Promises were introduced to the language in order to prevent callback hell.

// users to retrieve
const users = [
    'W8lbAokuirfdlTJpnsNC5kryuHtu1G53',
    'ZinqxnohbXMQdtF6avtlUkxLLknRxCTh',
    'ynQePb3RB2JSx4iziGYMM5eXgkwnufS5',
    'EtT2haq2sNoWnNjmeyZnfUmZn9Ihfi8w'
];

// array to hold response
let response = [];

function getUsers(users) {
    let promises = [];
    promises[0] = axios.get(`/users/userId=${users[0]}`);
    promises[1] = axios.get(`/users/userId=${users[1]}`);
    promises[2] = axios.get(`/users/userId=${users[2]}`);
    promises[3] = axios.get(`/users/userId=${users[3]}`);
    Promise.all(promises)
       .then((userDataArr) => response = userDataArr)
       .catch((err) => console.log(err));
}

Enter fullscreen mode Exit fullscreen mode

This does the same thing as your async/await code, and its just as readable. Your example promise code seemed crafted specifically to make promises look bad.

Error handling with try/catch (in one place, rather than in every call)

Promise chains have fall through. If I chain several promises, I can put a catch statement at the end and it'll catch any promise that fails above it.

asyncAction1()
   .then((x) => asyncAction2)
   .then((x) => asyncAction3)
   .catch((err) => console.log(err)) //This will catch any errors in the 3 actions
Enter fullscreen mode Exit fullscreen mode

Once a promise fails, it won't execute any other part of the chain until it is caught. So this behaves exactly as the try/catch block in the async/await code.

Error stacks make sense, as opposed to the ambiguous ones that you receive from Promises, which are large and make it difficult to locate where the error originated. Best of all, the error points to the function from which the error came.

I have had the exact opposite experience. Async/await code needs to be compiled down when targeting old browsers. While the functionality can be replicated easily, this compilation step destroys the stack traces with confusing functions required to emulate the behavior.

The one advantage of aysnc/await code is that is it easier to learn for a new comer to JavaScript. It takes some time to really understand how to use and compose promises effectively, while async/await code looks synchronous so it is less intimidating. But once one understands promises, async/await loses that advantage. Well crafted promise code is just as readable and maintainable, and arguably fits better with functional paradigms that are becoming more popular in the front end.

Collapse
 
tunaxor profile image
Angel Daniel Munoz Gonzalez

Thank you!
for some reason many people forget that methods like Promise.all and the fact that you can always return a promise and let it be fulfilled on the next then call prevents you from nesting promises themselves!