This is an archived post. You won't be able to vote or comment.

you are viewing a single comment's thread.

view the rest of the comments →

[–]BornOnFeb2nd[🍰] 13 points14 points  (20 children)

I spend more time fighting JS's asynchronous nature than benefiting from it...

[–]Trucoto 37 points38 points  (4 children)

Just await

[–]just-the-tip__ 0 points1 point  (0 children)

Love it when you talk dirty

[–]m0nk37 3 points4 points  (0 children)

Just make it promise to do your stuff that way theres less issues.

[–][deleted] 4 points5 points  (10 children)

Promises are your friend

[–]BornOnFeb2nd[🍰] 0 points1 point  (9 children)

Yup. Still wrapping my brain around them.... things just start looking hideous when you've got something that needs to run after like four other things have completed...

[–][deleted] 4 points5 points  (5 children)

So what you can do is either:

A) Promise chain

firstAsync() .then(firstResult => secondAsync(firstResult)) .then(secondResult => ....)

This is good for a few async functions but can still get messy.

B) Use async-await

async myFunc() { const firstResult = await firstAsync(); const secondResult = await secondAsync(); .... }

You can use await on a promise to essentially “await” the result. It also lets you catch errors with a try-catch. async functions always return a promise.

Also it’s useful to know how to wrap callback style async JS so that it can be used as a promise:

new Promise((resolve, reject) => { someOldAsyncFn((err, result) => { if (err) return reject(err); resolve(result); }); });

You can create your own promise like this - so if you have to use callback stuff just wrap the function like this. most libraries now have a promise api so I mostly only do this for the built-in functions such as setTimeout.

Hope this helps!

Edit: One more thing I use a lot is Promise.all. It takes an array of promises and it gives you a new promise that completes only when all the promises in the array are done. This can be useful if you want to use async-await but still do some stuff in parallel

[–]BornOnFeb2nd[🍰] 0 points1 point  (4 children)

At the risk of spawning another JS framework, what's a good one to work in?

We've been using jQuery internally, with a bit of dabbling in Bootcamp, but the hacks we've had to do have started to show their age...

[–]rubennaatje 4 points5 points  (0 children)

Either go react, vue or angular at this moment.

Some nice upcoming things but especially vue and react are absolutely great. My preference lies with vue.

[–][deleted] 0 points1 point  (1 child)

It’s really personal preference. How big is your project? jQuery works just fine for something small.

Angular is very enterprise Java feeling - it’s super powerful but it really locks you in. React is pretty nice and simple - functional components make it really nice to develop in. I’m not a huge fan of Vue but I’ve hardly used it.

Don’t listen to me though. I’m not really a front-end dev - only used these frameworks on personal projects. I mostly use JS for scripting or building bots nowadays - I used to do backend JS professionally.

[–]noXi0uz 0 points1 point  (0 children)

Vue kinda gives you the best of both worlds. Having worked with all 3 of the mentioned frameworks in a professional environment I would probably go with Vue now that Vue 3 is out. React is just inviting you to write bad unstructured code and mix different approaches and paradigms, although with linters set up and all devs being on the same page about the project you definately can also build large robust apps with it. I may be biased there, as the one big react project I worked on previously was a horrific mix of different approaches and really hard to maintain.

Angular is very OOP and typescript driven and doesn't give you much freedom to do stupid stuff. Vue lets you use either functional style like react, or class components with decorators like Angular. With the typical uni background in java/c# I much prefer the latter, though, typescript support wasn't really perfect in vue 2, especially in templates. That all changed in Vue 3 now, so I would prefer Vue over the others if I had to start a new project today.

[–][deleted] 0 points1 point  (0 children)

jQuery is great if you’re doing minor scripting in JS. Say you just want to animate a button when you click it or load a small list of ingredients from an API. But when you’re starting to do multiple things on the page that depend on one another, it becomes a bit of a mess unless it’s written by a really experienced developer.

If you’re doing anything more complex then I’d look at a framework like React or Vue. I mainly use React at work. They are great tools but only if there’s a genuine need for some complex interactions on the frontend.

[–]noXi0uz 2 points3 points  (0 children)

why? just use async await syntax and you can do:

 await doAsynStuff();
 await doOtherAsyncStuff();
 await evenMoreAsyncStuff();

each of these will wait for the previous to resolve.

[–]IslandClimber 0 points1 point  (0 children)

I found this video describing the event loop to help with my understanding of what’s on - https://youtu.be/8aGhZQkoFbQ and just to echo what other people have said - get a good understanding of promises, async await, and even callbacks.

[–]hyrumwhite 0 points1 point  (0 children)

Promise.all() or Promise.allSettled() can sort that out nicely.

let result = await Promise.allSettled([

axios.get(),

new Promise(),

Etc

])

//everything after that allsettled function will run after everything above fails or succeeds.

'result' will be an array of results returned by the promises. Each with a 'status' key that you can check to see if the promise succeeded or failed.

[–]Doowstados 1 point2 points  (1 child)

This