Search for a command to run...
As beginners of JavaScript Promises, you may make a few common mistakes. This article to help you identify them and start using them in the right way.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
For such things like loops, filters, groups I use alot library - it designed for lazy iterations over arrays, but also supports Promise handlers. The first example would look like this:
const names = ['saviomartin', 'victoria-lo'];
const users = await alot(names)
.mapAsync(async name => {
let { data: user } = await axios.get(`https://api.github.com/users/${name}`);
return user;
})
.toArrayAsync({ threads: 4 })
Alex Kit, Great, thanks for letting me know. Shall explore it.
This is a superb topic which very few people talk about! You made this so easy to understand!
Thanks a lot Pierre-Henry Soria
Eleftheria Batsou Hehe...Thanks a lot for thinking that way 😂!
I am sure of eating, drinking, sleeping with promises for a month now. Time to build another kingdom 😀.
Great article Tapas. Just saw one typo.
.ctach()
You can search and correct.
Thanks,
Tadit
That's a great .catch(new Error('.ctach()'). Thanks a lot, Tadit Dash.
Tapas Adhikary one more is there too.
Conclusion: Always use .ctach()...
I Promised to Catch all typos. 😂😂
Tadit Dash Oye.. I do not find amymore.. haha.. it shows 3 in our earlier conversation...
Make sure of not a false promise(cached)
Tapas Adhikary it was cached. 😎🙏
Thanks a lot Ankur Tyagi
Really Nice article !!
I will take this opportunity to clear my doubts. I code as per below.
const request = require('request');
const test = userData => {
console.log('test::parameters', userData);
if (userData && userData.request === true) {
const option = {
method: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
headers: {
'Content-type': 'application/json; charset=UTF-8'
},
json: true,
proxy: null,
body: {
title: 'foo',
body: 'bar',
userId: 1
}
};
console.log('test::outgoingBody::', option);
return new Promise((resolve, reject) => {
request(option, (error, response) => {
if (error) {
return reject(error);
} else {
if (response && response.body ) {
return resolve();
} else {
return reject(new Error('Error Response'));
}
}
});
});
} else {
return Promise.reject(new Error('Invalid Userdata'));
}
};
//some business logics
test().catch(err=>console.error(err))
//some business logics
//--------------------------
//some business logics
test({request:true}).catch(err=>console.error(err))
//some business logics
Am I doing correctly?
M. Suman Patra, Thanks for reading and feedback.
Promise.reject to throw the error. That's right.true. So to handle that promise's resolve you should have a .then(). Why did you think, you are not returning anything?Tapas Adhikary, To catch test function errors gracefully, I am using catch callback but I thought then callback is not needed because I am not waiting for test function execution and also not returning anything from API call/from the test function.
Note: As the request dependency does not support async/await, I had to use promise constructor.
M. Suman Patra, I get that. In your typical case, where you do not return anything by resolving the promise, you are not accountable for handling it.
if (response && response.body ) {
return resolve();
}
So, the current handling works to take care of the error test cases alone. If that's what is the intention, it looks good to me.
Tapas Adhikary, Thanks for the info and will be waiting for ur next youtube video.
Great article. I'm embarrassed to admit that I've committed all of the mistakes above, despite the number of times I re-read about promises.
Regarding handling errors within promises, do you think it is essential that web apps display error messages in UI? I think just console.log them is not very helpful.
Trang Le, I think most of us do many of these :)
About your suggestion of propagating the errors to the UI, absolutely. In real-life examples, that's how it should be.
Name one of the difficult topics from JavaScript? There are 80% chances of getting "Promises" as the answer. Here is a series to demystify that with explanations, examples, and interview questions.
JavaScript Promise is an important topic to learn. None of the interviews are complete without promises. Let's start efficiently learning them.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
Hello friends 👋, we are reaching the end of the series, Demystifying JavaScript Promises - A New Way to Learn. So far, we have learned a lot about JavaScript asynchronous programming and promises.
If you are new to the series, please check out the previous articles,
In this article, we will look into a list of common mistakes we make in using promises.
The most common mistake is handling promises inside a loop(for, forEach, and all other cousin loops). We use promises to accomplish asynchronous(async) operations. Async operations take time to complete. How much time? It depends on many factors, and we can not guarantee.
So, when we handle multiple promises within a loop, we need to be a bit careful. Some promises may take longer to resolve. The rest of the code inside the loop may finish execution early and may cause undesirable behaviors. Let's understand it with a simple example.
I want to fetch a few GitHub details of my three dear friends(Savio Martin, Victoria Lo, and Usman Sabuwala) along with mine.
First, Let's create an array of their GitHub user ids.
const users = ['saviomartin', 'victoria-lo', 'max-programming', 'atapas'];
Now, let's create a simple function to call GitHub API to fetch user details by user id.
const fetchData = user => {
return fetch(`https://api.github.com/users/${user}`);
}
So let's loop?
const loopFetches = () => {
for (let i = 0; i < users.length; i++) {
console.log(`*** Fetching details of ${users[i]} ***`);
const response = fetchData(users[i]);
response.then(response => {
response.json().then(user => {
console.log(`${user.name} is ${user.bio} has ${user.public_repos} public repos and ${user.followers} followers`);
});
});
}
}
loopFetches();
We use the for-loop to loop through the user id array and call the fetchData() method. The fetchData() method returns a promise with a response. So we get the response value using the .then() handler method. The response value is another promise. Hence we need to invoke .then() one more time to fetch the intended data.
The fetchData() performs an asynchronous operation, and you can not ensure the sequence of output in this case. So, there are chances we get the output in a different order than the user id passed to the fetch method. Our order was savio, victoria, max-programming, and atapas. However, one possible output order could be,
Let's fix this. Now we will change the loop function a bit to use our favorite async/await keywords. In this case, the control waits when it encounters the await keyword. Hence we have an assurance of getting the first user data and then move to the second one, then the next one, and so on.
const loopFetchesAsync = async () => {
for (let i = 0; i < users.length; i++) {
console.log(`=== Fetching details of ${users[i]} ===`);
const response = await fetchData(users[i]);
const user = await response.json();
console.log(`${user.name} is ${user.bio} has ${user.public_repos} public repos and ${user.followers} followers`);
}
}
Here is the output(always),
But, still, there is a problem! Fetching each of the user details should be an asynchronous activity. Also, these are unrelated promises, and they must run in parallel to produce a result. In the example above, the promise execution is synchronous.
To fix that, use the Promise.all([...]) or Promise.allSettled([...]) APIs. They both take an array of promises, run them in parallel, and return the result in the same order of the inputs. The total time taken by these API methods depends on the max time taken by any of the input promises. It is far better than executing them sequentially.
const loopAll = async () => {
const responses = await Promise.all(users.map(user => fetchData(user)));
const data = await Promise.all(responses.map(response => response.json()));
console.log(data);
data.map(user => {
console.log(`*** Fetching details of ${user.name} ***`);
console.log(`${user.name} is ${user.bio} has ${user.public_repos} public repos and ${user.followers} followers`)
});
}
loopAll();
Promise API output array(check the order of elements in the array is the same as the input order),
The output we print in the browser console,
Conclusion: Use promise APIs(
.allor.allSettled) to handle multiple unrelated promise executions than using loops.
When using a promise chain, do NOT repeat the promise in front of the .then, .catch handler methods.
Let's create a promise that resolves a value of 10.
const ten = new Promise((resolve, reject) => {
resolve(10);
});
Now, let's form a proper promise chain. Here we return and move the values down the chain.
ten
.then((result) => {
// returns 20
return result + 10;
})
.then((result) => {
// returns 200
return result * 10;
})
.then((result) => {
// returns 190
return result - 10;
})
.then((result) => {
// logs 190 in console
console.log(result);
});
So, the output we see in the console is the value 190. Now take a closer look at the code below. Here we use the promise ten in front of all the .then() methods. We are NOT forming a chain here.
ten
.then((result) => {
// returns 20
return result + 10;
})
ten
.then((result) => {
// returns 100
return result * 10;
})
ten
.then((result) => {
// returns 0
return result - 10;
})
ten
.then((result) => {
// logs 10 in the console.
console.log(result);
});
Always remember this,
Conclusion: Do not be confused with a NO chain over a promise chain.
The most straightforward way to handle errors in promises is with the .catch() hander method. But when we forget to use it, we may mishandle an error scenario in our code.
Here is a simple function that takes a number as an argument. If it is an even number, it resolves by returning a string, Even. In case of an odd number, the promise rejects with an error message.
const oddEven = (num) => {
return new Promise((resolve, reject) => {
if (num % 2 === 0) {
resolve("Even");
} else {
reject(new Error("Odd"));
}
});
};
First, let's pass an even number, 10.
oddEven(10).then((result) => {
console.log(result);
});
Alright, the output is expected as Even. Now, let us pass an odd number to the function.
oddEven(11).then((result) => {
console.log(result);
});
We will get the uncaught error,
As we discussed, the best way is to use the .catch() always with one or multiple .then() to handle errors.
oddEven(11).then((result) => {
console.log(result);
}).catch((err) => {
console.log(err.message);
});
Conclusion: Always use
.catch()to handle errors even if you are very sure of no error chances!
.then() handlerYou may sometimes miss using the function as a parameter of the .then() handler. Please note, the .then() method takes two callback functions as arguments. The first one is to handle the resolve case and the second one for the rejected case.
But if we miss using the callback function and use any other value instead, it doesn't give us the expected output. Can you please guess the output of the following code snippet? Will it be Hello or World?
const hello = Promise.resolve("Hello");
hello.then('World').then(result => console.log(result));
It will be Hello as the first .then() method doesn't use a function callback. The previous result just falls through.
Conclusion: Do not forget the function as an argument to the
.then()handler.
Another common mistake we make is using the synchronous(in-memory) method call inside a promise and making the program execution slow.
Consider, we have an object(a user cache) to get the user details using the email id as a key.
const cache = {
'tapas.email.com': {
'name': 'Tapas Adhikary',
'blog': 'GreenRoots Blog'
}
};
Now, check out the following function. It first finds if the user is in the cache. If not, then makes the call to fetch the data and update the cache. If it is found, just print it. The following code works, but we are delaying our decision by putting the code of user retrieval from cache inside the promise.
const getData = (email) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const userFromCache = cache[email];
if(!userFromCache) {
// Make the call to fetch user data
// update cache
console.log('Make the call and update cache');
} else {
console.log(`User details ${JSON.stringify(userFromCache)}`);
}
}, 2000);
})
};
We can rather do this,
const getData = (email) => {
const userFromCache = cache[email];
if(userFromCache) {
console.log(`User details ${JSON.stringify(userFromCache)}`);
} else {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Make the call and update cache');
}, 2000);
});
}
};
Conclusion: Do not slow down decision-making by putting the synchronous operation inside a promise.
Last but not least. Please don't do this. It is redundant to use the try-catch inside a promise executor function. We have .then() and .catch() to handle results and errors respectively.
// Redundant try-catch
new Promise((resolve, reject) => {
try {
const value = getValue();
// do something with value
resolve(value);
} catch (e) {
reject(e);
}
})
.then(result => console.log(result))
.catch(error => console.log(error));
Better way,
// Better
new Promise((resolve, reject) => {
const value = getValue();
// do something with value
resolve(value);
})
.then(result => console.log(result))
.catch(error => console.log(error));
Conclusion: The try-catch inside a promise is just a waste of time and effort.
That's all for now. Do not forget to have a loot at the GitHub repository with all the source code used in this article,
You can also try out some cool quizzes based on the learning from the series. Check this out.
Let's connect. You can follow me on,