Promises, Promises

The thing that has caught me up most recently is asynchronous JavaScript. From the sounds of it, it’s a story as old as JavaScript itself, but wow it really got me! Long story short, I spent about 10 hours banging my head against a wall trying to get a few functions to work together. They really didn’t want to.

Promises, Promises

The issue came down to working with a mix of callback functions and promises. Sequelize (which I’m using to interface with the app’s database) works with promises, so every time data is requested, by default the function will return a promise rather than the actual data.

I’ve become used to how it works and have been getting along fine but truth be told, I never really learned how promises work any deeper than on a superficial level, and definitely hadn’t really understood how they can/don’t work the way you think they might alongside other non-promisey functions.

For this particular problem I ran into, I’d written some code which contained a couple of callbacks and relied on some helper functions, and deep in the middle was one database call that was being called several times in a loop. (Which by the way, don’t even get me started on that…I want to write that part better still!) The page was meant to be rendered with the resulting data, but since the data hadn’t arrived yet, it was just rendering a basically blank page.

I had tried so many ways to make the page wait for the data before loading. But ultimately not being able to make it work came down to a too-shallow understanding of promises.

Well code mentoring session to the rescue! We went through the basics and did a few examples which helped…then applied the examples to the project and got it to work! I am so so glad I can move on from this issue now 😁

For Future Reference

The sandbox functions below helped understand how this all works. Learned about the console.time() and console.timeEnd() methods to see it in action–>these show you how much time it’s taking for each function to run, and you see what order they’re returning in.

const delayCallback = function (cb) {
	setTimeout(() => {
		cb(null, `THIS IS A CB FUNCTION`)
	}, 300)
}

const delayPromise = function () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(`HELLO!`)
		}, 200)
	})
};

console.time(`TIMER ZERO`);
console.time(`FIRST TIMER`);
console.time(`SECOND TIMER`);
console.time(`THIRD TIMER`);

delayPromise().then((result) => {
	return new Promise((resolve, reject) => {
		console.timeEnd(`TIMER ZERO`)
		console.log(result);
		console.timeEnd(`FIRST TIMER`)
		delayCallback((err, data) => {
			console.log(data);
			console.timeEnd(`SECOND TIMER`);
			resolve();
		})
	})
}).then(() => {
	return delayPromise()
}).then((result) => {
	console.log(result);
	console.timeEnd(`THIRD TIMER`);

});

// delayCallback(() => {
// 	delayCallback(() => { console.log(`AGAIN`) })
// 	console.timeEnd(`FIRST TIMER`);
// });

// console.timeEnd(`SECOND TIMER`);

When we first started the timers were coming back in the wrong order (exactly how my app was incorrectly functioning), but by wrapping the first & second timers in a new promise, we got the order right. This is how I fixed it in my project too.

Other Stuff

Got another look at the Cypress testing suite and saw how easy it is to use for end to end testing. Still need to play around with it a bit (and there is some work to do to get it to play nicely with Auth0) but this might answer some of the questions I had about how to implement tests in this app.

Also heard about Postgraphile which is a way to expose a GraphQL API from a Postgres database. It sounds really interesting and potentially useful in the future!

Up Next

UI time!