Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.
In this episode, I want to show you a really powerful tool for working with Promises -
Imagine that you have two fetch methods, that are getting some data from external APIs. When both of them returns that data, you combine it and pass it down to your client. Methods are parallel and you use
Promise.all method. When one of them fails, you fail the whole service and return an error - a pretty common scenario. Let's see how that might look like:
const fetchMeSomeData = fetch('/url'); const fetchMeSomeOtherData = fetch('/other-url'); const [data, otherData] = await Promise.all([fetchMeSomeData, fetchMeSomeOtherData]); return mapTheResponse(data, otherData) // Manipulate the `data` and `otherData` and return to the client
Now imagine your PM comes to you and says "That's all good, but we want to change the behaviour. If the
otherData call will fail, we want to map the response only based on
data - we can ignore the
otherData". How we can achieve this?
We can use the
Promise.allSettled method, which gives us better control over the flow.
const fetchMeSomeData = fetch('/url'); const fetchMeSomeOtherData = fetch('/other-url'); const [data, otherData] = await Promise.allSettled([fetchMeSomeData, fetchMeSomeOtherData]) if(otherData.status === 'rejected') return mapTheResponseWithoutOtherData(data.value); if(data.status === 'rejected') throw new Error('Not enough data'); return mapTheResponse(data.value, otherData.value);
As you can see, this gives us more options when it comes to controlling the behaviour of our fetch methods. We can ignore the failed
fetchMeSomeOtherData method and focus only on the response from
This handy method was release in the ES2020 edition, so it's relatively new to the JS/TS ecosystem, but as you can see, it's very powerful and allows us to have much more control over our code flow. If you want to learn more about it, check out the MDN page.