JavaScript Promises In 10 Minutes
Why Stack Overflow recommends it
Stack Overflow users link it when answering or commenting on questions where a newcomer is confused by asynchronous JavaScript, especially unhandled promises and Firebase calls.
Recommended by 3 people across 3 different months, 2021 to 2023.
What it is
A short tutorial from Web Dev Simplified that explains JavaScript Promises, introduced with ES6, and how to create and consume them. It covers resolve and reject, then and catch, and how promises replace callback-heavy code, with a CodePen to follow along.
What people said
Recommends Bjørn Reemer · 2021-01 · Stack Overflow · on “Best practice for nesting ajax calls”
Given your work case, you could consider the following method: artistForm.submit(async (e) => { e.preventDefault(); let inputSearchQuery = artistInput.val(); let searchQuery = encodeURI(inputSearchQuery); let artist = await $.ajax({ url: `${baseUrl}search?q=${searchQuery}&type=artist`, type: 'GET', datatype: 'json', headers: { 'Authorization': 'Bearer ' + accessToken } }); const artistId = artists.items[0].id; let topTracks = await $.ajax({ url: `${baseUrl}artists/${artistId}/top-tracks?country=CZ`, type: 'GET', datatype: 'json', headers: { 'Authorization': 'Bearer ' + accessToken } }); let relatedArtists = await $.ajax({ url: `${baseUrl}artists/${artistId}/related-artists`, type: 'GET', dat
Recommends samthecodingman · 2021-06 · Stack Overflow · on “Firebase function is not realtime(?)”
Your code also has 7 different lines that have an unhandled `Promise` (results/errors aren't handled) and many of these are in loops meaning you could have hundreds of these. Have a look at this article [LINK] , this video [this video] and this video [LINK] to refresh yourself on how they work and how to handle parallel promises properly.
Recommends Dharmaraj · 2021-08 · Stack Overflow · on “How can I add documents in a collection in firebase in JS?”
@Vivek that's a large topic to talk on tbh. Checkout this video on promises [this video] . That's a nice explanation for promises.
Cites shamgar · 2021-07 · Stack Overflow · on “Async & await function on Javascript”
In addition for Amar's answer, I'd like to add a little bit Firstly you need to understand asynchronicity. Imagine that I talk to my friend and this is the conversation: me: Hey, can you send me the number of the girl from the party last night? friend: Sure, I will get home and send it to you And before he sends me the number, I try to call her. Doesn't make sense right? So the same logic applies here. The async and await keywords means that there is somthing that should happen before the next line of code getting executed. So if you really want to understand the concept of this asynchronicity, you should learn about higher-order function [LINK] , callback functions [LINK] , promises [this video]
Cites samthecodingman · 2022-02 · Stack Overflow · on “React native firebase how to return promise list”
onSnapshot() [LINK] is used to attach a real-time listener to certain data location. However, because you are trying to fetch data on-demand, you should be using getDocs() [LINK] instead to get that data just once. Remember that the Firebase SDKs are asynchronous APIs. Don't fall into the trap of thinking that just because one line is above another that they will execute in the same order. These APIs must be appropriately chained using .then , .catch and async / await , in addition to making sure you return any Promise chains to the caller. You can read up on Promises here [LINK] and here [LINK] , or even have a look at Web Dev Simplified's video series [this video] . async function fetch_recent_
Cites kd8 · 2023-03 · Stack Overflow · on “Parameter matching in javascript”
In a tutorial on Promise ( [this video] ), there was the following: let p = new Promise((resolve, reject) => { let a = 1 + 1; if (a == 2) { resolve('Success'); } else { reject('Failed'); } }) p.then((message) => { console.log("this is a success" + message); }).catch((message) => { console.log("this is an error" + message); }) In the documentation for Promise, [LINK] , scrolling down to the Constructor section, we have: Promise() Creates a new Promise object. The constructor is primarily used to wrap functions that do not already support promises. What I learned from the video is that the .then() is going to execute if resolve returns true and .catch() will be executed when the reject return true.