Hi, folks. I’m having a hard time understanding how to use async/await, and I was hoping I might get a bit of insight here into what I’m missing. I’m trying to implement a function in a word game that checks whether a word is valid.
Here’s what I’d like to see happen:
The submitWord function is called. It sends the word to isValid, which makes sure the word conforms to the rules of the game, then calls checkDictionaries, which sends a request to a dictionary website, receiving a status code of 200 if the word exists or 404 if it doesn’t. This returns true or false to isValid, which then returns true or false to submitWord. The trouble I’m having is I can’t seem to figure out how to get my program to await the results of the request to the dictionary site. My starting code looked like this:
function isValid(word) {
for (let letter of word) {
if (!lettersList.includes(letter)) {
return false;
}
}
return checkDictionaries(word);
}
function checkDictionaries(word) {
const proxy = "https://cors-anywhere.herokuapp.com";
const dictUrl = "merriam-webster.com/dictionary";
fetch(`${proxy}/${dictUrl}/${word}`)
.then(r => r.status)
.then(status => {
if (status == 200) {
return true;
} else {
return false;
}
})
.catch(err => console.log(err));
}
function submitWord() {
let word = document.getElementById("word-input").value.toLowerCase();
if (
!isValid(word)
) {
alert("Invalid word.");
document.getElementById("word-input").value = "";
} else {
wordList.push(word);
}
}
Here, if the checkDictionaries function is reached, isValid always returns undefined, since it returns the value before the response has come back from the dictionary website. Based on what I’ve read, if I want to make the isValid function wait for the results of checkDictionaries, I should add async to the beginning of isValid and await to the checkDictionaries call inside it. When I do this, however, VS Code tells me that “‘await’ has no effect on the type of this expression”. I’m clearly misunderstanding how this works, but after several tutorials on the subject, I’m still missing a crucial piece. What do I need to do to make this work as intended?
After some more finagling, I’ve gotten the information flow where I want it, but I can’t seem to get a return value from the checkDictionaries function. The new code looks like so:
async function checkDictionaries(word) {
console.log('starting checkDictionaries function')
const proxy = "https://cors-anywhere.herokuapp.com";
const dictUrl = "merriam-webster.com/dictionary";
await fetch(`${proxy}/${dictUrl}/${word}`)
.then(r => r.status)
.then(status => {
console.log(`status received, status == ${status}`)
if (status == 200) {
console.log('word exists')
return true;
} else {
console.log('word does not exist')
return false;
}
})
.catch(err => console.log(err));
}
async function isValid(word) {
console.log('starting isValid function')
for (let letter of word) {
if (!lettersList.includes(letter)) {
return false;
}
}
let dictValid = await checkDictionaries(word);
console.log(`dictValid == ${dictValid}`)
if (dictValid) {
return true;
} else {
return false;
}
}
async function submitWord() {
console.log('starting submit function')
let word = document.getElementById("word-input").value.toLowerCase();
let valid = await isValid(word);
console.log(`valid == ${valid}`)
if (!valid) {
console.log('word not valid')
alert("Invalid word.");
document.getElementById("word-input").value = "";
} else {
wordList.push(word);
}
}
I set up console.log statements at each step of the way so I can see the process that’s taking place. What I see from a valid word is:
starting submit function
starting isValid function
starting checkDictionaries function
status received, status == 200
word exists
dictValid == undefined
valid == false
word not valid
No matter what I put in the return statement of checkDictionaries, the result is always undefined. Is there something about async/await return values I’m misunderstanding?
That did the trick! I guess the return statements as I had them only affected the return value of the fetch, rather than the return value of the function. As such, it looks like the following also works.