From observing the TS questions on SO, seems one of the hardest things for new TS coders, including users with five digit rep, is the concept that something could be null and that they have to handle this case. I'm baffled at the amount of times "use a null guard" is the answer to a question. It's something that shows up so often it might be a good candidate for a duplicate yet I don't feel it an appropriate FAQ. "If something could be null, do an if check to prevent that case"
Since Im learning Promises in JS, I want to confirm what I'm thinking is right. I know what then function is for but I'm not confirm when the promise is exactly created.. So please correct me if I'm wrong: "promise's then function registers the callback(s) and that is when it creates a new promise (that means the promise is in Pending state) and returns it .. like to the chained then"
var p = Promise.resolve( 21 );
p
.then( function(v){
console.log( v ); // 21
// fulfill the chained promise with value `42`
return v * 2;
} )
// here's the chained promise
.then( function(v){
console.log( v ); // 42
} );
Is this how it happens? : Promise.resolve(21) will create a new promise and immediately resolves it (asynchronously). The moment the promise is created and returned, (first)then function registers the associated callback. And the new promise is created and returned and passed to (second) then. Where it registers another callback. As first promise is resolved to 42, it calls the first callback to log 21 and after that second callback gets resolved and logs 42
Promise.resolve() creates the resolved promise but handles the resolution (firing all then/catch/finally handler) in the next tick. So, even though you start with a resolved promise, it all still works asynchronously. It essentially doesn't matter if you have to wait for the value or not - you'd get the exact same resolt in the end, except on one case you might need to wait longer.
But to answer your question more concretely - Promise.resolve(21) would (as I said) create a promise but only fire the callbacks later. So, the first and second then() are still executed before that point. Thus the entire promise resolution chain is there and ready. Once the code runs to completion in the current cycle of the event loop, the next item in the queue would be picked up.
In this simple application, the next one would be firing the callback(s) of p which would then trigger the downstream promises to also resolve (as they depend on p) and then their callbacks would be resolved.
That's correct. p2 = p1.then(something) ends up with two promises.
You can attach multiple then callbacks to one promise: p1.then(something); p1.then(somethingElse) and both something and something will be fired when p1 resolves.
@VLAZ I believe it's a case of a much larger problem of inability to comprehend that a value can be missing when accessed. We wouldn't have so many NPEs otherwise
@OlegValteriswithUkraine I admit I've had the same problem when I began programming. But I'd expect somebody with 27k rep to not really struggle with this concept.
I do consider "why didn't my random type assertion also fix the data" as a separate class of problem.
I saw an answer today that claimed type assertions prevented runtime problems. I think it was AI generated but still. It's a really stupid claim to make.
For clarity, the context was code like this:
const foo: bigint = 0 as any as bigint;
there would definitely not be any runtime error if you do 42n + foo
tbf i too had this misconception very early on with typescript, but it didn't last long. it was more a case of... i have this incoming object from a json response and i need to use it within this class... how do i type it
that turned into how do i create json templates, and a whole useless rabbithole
second then() already has registered the callback to the promise. But (return new Promise(){...}) returns another new Promise
so second resolve i.e. resolve(v * 2) will get resolved right where it is and value 42 will be passed to second then() to log 42
So my Question: second then() first registered the callback for the promise which was created by the first then(). But new promise overwrote the first promise or what??
if you return a promise to .then, .then will return that promise rather than creating a new one.
eh
that explanation isn't clear/100% accurate i guess
tldr, the callbacks are registered immediately, but what gets passed to the callback is dependant on how the previous promise resolves and what the previous callback returns
@Sadiq Promises auto flatten. Returning a plain value and returning a promise from a .then() is effectively treated the same and the next .then() handler in the chain will only ever get a plain value, never a promise.
what you return to .then is passed along to the next .then as an argument, unless it's a promise in which case the result of that promise is passed along to the next .then as an argument.
it's more, the second .then's callback returns and is "done" when it returns the new promise.
it's just that promise that the .then initially returns won't resolve until the promise the callback returned resolves
keep in mind, that new promise coulda instead been an entirely different .then chain, so it wouldn't have resolved until all of those resolved in that case.
it isn't any kind of special handling, it's just, if it returns a promise, now it has to wait for that promise to resolve to know what gets passed along in the chain.
i'm honestly not sure what registered is referring to
here's your code broken down a bit more
var x = (v) => new Promise( resolve => resolve(v * 2) );
var a = Promise.resolve( 21 );
var b = a.then( function(v){
console.log( v ); // 21
return x(v);
});
var c = b.then(function(v){
console.log(v); // 42
});
it functions identically, except that there's an additional function, x, that returns a promise
Promises are like listeners .. so that when it gets resolved, the associated aka registered handler will be called. So the registering is must for the handler to be called
var x = (v) => new Promise( resolve => resolve(v * 2) );
var y;
var a = Promise.resolve( 21 );
var b = a.then( function(v){
console.log( v ); // 21
y = x(v);
return y;
});
var c = b.then(function(v){
console.log(v); // 42
console.log(y === b); // false
});
The Stable channel is being updated to OS version: 15572.57.0 Browser version: 117.0.5938.144 for most ChromeOS devices. If you find new issues, please let us know one of the following ways File a bugVisit our ChromeOS communitiesGeneral: Chromebook Help CommunityBeta Specific: ChromeOS Beta Help CommunityReport an issue or send feedback on ChromeInterested in swit…
@Michelle Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
@VLAZ I hope you are joking xD We've both seen worse from high-reps precisely because it doesn't measure knowledge (oh, how I wish more than 1 person at SE understood that)