yarn install
You will not need to spin up a server in this workshop. You can "run" the files individually in the terminal by doing node <PATH_TO_FILE>
for most of the exercises.
In the example from last workshop we had a Promise that compared a number to the number 10.
// The Promise
const compareToTen = (num) => {
return new Promise((resolve, reject) => {
num > 10
? resolve(num + " is greater than 10, success!")
: reject(num + " is less than 10, error!");
});
};
// Calling the Promise
compareToTen(15)
.then((result) => console.log(result))
.catch((error) => console.log(error));
If we convert the Promise call, to an async
function that includes a try
/catch
(for better error handling), we end up with something like this:
const handleCompareToTen = async (num) => {
try {
const result = await compareToTen(num);
console.log(result);
} catch {
console.log(err);
}
};
// Calling the function (that uses the Promise)
handleCompareToTen(15);
handleCompareToTen(8);
Using async
/await
in this case requires a little more setup as we create a function that uses the Promise, but calling the code becomes much simpler as there is no need to chain a bunch of then
s everytime we want to use the Promise.
Rewrite the text transformation exercise from the last workshop to use async
/await
.
Async/Await becomes much more useful when dealing with APIs, and modules that wrap Promises.
Fill in the blanks of a rewritten version of the getIssPosition
code from last workshop.
- Write a function called
doublesLater
that returns a new Promise that doubles a number after 2 seconds. - Here is a promise called
handleSum
uses thedoublesLater
Promise. It takes anum
, doubles it 3 times (with thedoublesLater
Promise), and returns the sum of the three successive doubles. As you can see, it is quite the hellish situation. it is also a convoluted and totally fabricated situation...
const handleSum = (num) => {
let theSum = 0;
return new Promise((resolve) => {
doublesLater(num).then((a) => {
theSum += a;
doublesLater(a).then((b) => {
theSum += b;
doublesLater(b).then((c) => {
theSum += c;
resolve(theSum);
});
});
});
});
};
- Rewrite
handleSum
withasync
/await
.
- Head over to https://icanhazdadjoke.com/api. Read the documentation...
- Write a Promise that called
getDadJoke
that will return a random joke from this API. Return only the actual joke as a string. - The
request-promise
module accepts auri
but can also accept an object with various parameters. You will want to set the headers to"Accept": "application/json"
console.log
the result to read the joke.
READ the request-promise NPM page for more information.
- Head over to https://docs.tronalddump.io/. Read the documentation...
- Write a Promise that will return a random Tronald Dump quote. I had a hard time actually finding the api endpoint... Here it is: https://api.tronalddump.io
- Examine the response to get the right data to return.
- Return only the quote as a string.
- Head over to https://github.com/sameerkumar18/geek-joke-api. Read the documentation...
- Write a Promise that will return a random joke.
🟡 - Minimally complete workshop (75%) - 🟡
We are going to create a server that will respond with a joke based on the endpoint that the user calls.
- Export the joke functions you wrote in Exercise 4.
- Go back to each function in exercise 4 and add in a line at the bottom of the file that
exports
the function.
- Go back to each function in exercise 4 and add in a line at the bottom of the file that
module.exports = { myFunction };
- In
server.js
create the following endpoint:
/joke/:type
Require
all of the joke functions in the providedhandlers.js
file.- This file should also contain a function called
handleJoke
that returns a joke of the type requested (dad
,tronald
orgeek
). - Don't forget to do
yarn dev
to run the server.
Add a React Frontend to render the jokes to the browser.