How can I execute a function ONLY if fetch request returns 404 status?


Joined
Sep 17, 2022
Messages
1
Reaction score
0
First, the bird's-eye view: I'm trying to write a Wordle mock for my fantasy basketball league. I'm trying to do it using Vanilla Javascript, since I know almost nothing about frameworks etc.

My basic problem is this: I need to authenticate that the word the user inputs is a valid English word. The way I'm doing this is using a dictionary API called wordsAPI. The basic scheme is

i create a boolean variable isWord, true by default
user inputs word
I look that word up in wordsAPI
if wordsAPI returns 404 status on that word, I set isWord to false
I only do the rest of my program if isWord is true

Now, I have figured out how to do all this using XMLHttpRequest. However, it seems that method is deprecated and I might want to be using fetch. I'm told this is simpler, but so far it hasn't been, for this use-case anyway.

Here is the XMLHttpRequest code that is currently doing what I want:

JavaScript:
let testWordString = prompt("Enter a word");
let isWord = true;
const data = null;

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
   if (this.readyState === this.DONE) {
       if(this.status === 404 &&
       !supplementalWordList.includes(testWordString.toUpperCase())){
          isWord = false;
        }
      }
    });

xhr.open("GET", `https://wordsapiv1.p.rapidapi.com/words/${testWordString}`,
    false);
xhr.setRequestHeader("X-RapidAPI-Key", "key-goes-here");
xhr.setRequestHeader("X-RapidAPI-Host", "wordsapiv1.p.rapidapi.com");

xhr.send(data);

if(isWord === true){
   execute rest of program
}

So my question is how can I do this same thing using fetch? Most of the code above was copied directly from wordsAPI's entry on rapidAPI. I did the same with the fetch code they offer, but I can't figure out how to get the status of the response so I can use it as a condition to change my isWord variable.

For reference, here's the generic fetch code from rapidAPI:

JavaScript:
const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': 'key-goes-here',
        'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com'
    }
};

fetch('https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf', options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));

I've tried things along the lines of this:

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': 'key-goes-here',
        'X-RapidAPI-Host': 'wordsapiv1.p.rapidapi.com'
    }
};

fetch('https://wordsapiv1.p.rapidapi.com/words/hatchback/typeOf', options)
    .then(response => response.json())
    .then(response => {
           if(response.status === 404){
                 isWord = false;
           }))
    .catch(err => console.error(err));

But nothing along these lines is working so far. I just can't find a way to represent the status in a way that I can use it to change my variable.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top