0

Edit: Thanks to everyone who commented, and my apologies for asking a question that had already been answered elsewhere. I have managed to solve this problem by changing the try block to the following:

try {
  const response = await fetch(`${url}${inputWord}`);
  const data = await response.json();
  if (response.ok) return data;
  throw new Error();
}

I am working on my very first javascript application (a dictionary app) and I am having trouble using try / catch. The try block seems to work with no problems and I can search for words in the API, however the error does not work.

When searching for a word that does not exist, there should be an error message instead of the search result, but this is not appearing. Instead, the data still seems to be getting returned from the function fetchData() and passed into the subsequent function displayData() and causing the error.

I might be incorrect here, but shouldn't the catch block prevent the return statement from the try block from being executed? I have tried adding return to the catch block to see if it would change anything, but I'm out of my depth here and can't find a solution. Can anyone help point me in the right direction?

Here is a jsfiddle: https://jsfiddle.net/trpxL0kj/

Here is my code:

const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const form = document.querySelector('.form');
const input = document.querySelector('.form-input');
const content = document.querySelector('.content');
const details = document.querySelector('.details');


const fetchData = async () => {
  let inputWord = document.querySelector('.form-input').value;
  try {
    const response = await fetch(`${url}${inputWord}`);
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    details.innerHTML = 'This word is not in the dictionary.';
  }
};

const displayData = async (entry) => {
  const word = entry[0].word;
  const grammar = entry[0].meanings[0].partOfSpeech;
  const definition = entry[0].meanings[0].definitions[0].definition;
  const example = entry[0].meanings[0].definitions[0].example || '';
  details.innerHTML = ` 
    <article class="result">
      <p class="word">${word}</p>
      <p class="grammar">${grammar}</p>
      <p class="definition">${definition}</p>
      <p class="example">${example}</p>
    </article>
  `;
};

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = await fetchData(url);
  displayData(data);
});
Jack Averill
  • 821
  • 1
  • 10
  • 27
  • 1
    What does your server return when the word isn't found? – T.J. Crowder May 10 '23 at 12:53
  • Also, your `fetch` call is missing a check on [`response.ok`](https://developer.mozilla.org/en-US/docs/Web/API/Response/ok), more on my old anemic blog [here](http://blog.niftysnippets.org/2018/06/common-fetch-errors.html). – T.J. Crowder May 10 '23 at 12:53
  • `fetch` doesn't throw exceptions unless there's a network error preventing the response from being received. You'd need to check the response to see if it was an "error" response from the server. (Ideally to result in an HTTP error code, but some APIs may return a "successful" response and indicate an "error" in the resulting data.) – David May 10 '23 at 12:55
  • You're getting 404 HTTP status which is not exception, hence no catch block. Similar to https://stackoverflow.com/questions/38235715/fetch-reject-promise-and-catch-the-error-if-status-is-not-ok. – Syperia May 10 '23 at 13:01

0 Answers0