1

I have a function that runs on submitting a form

const displayRecipeList = async search => {
  try {
    renderSpinner();
    const recipeList = await getJSON(
      `https://forkify-api.herokuapp.com/api/search?q=${search}`
    );
    renderRecipeList(recipeList.recipes);
  } catch (err) {
    clearResultList();
    clearSearchInput();
    searchResults.insertAdjacentHTML(
      `beforeend`,
      `
      <div class="error">
        <div>
          <svg>
            <use href="${icons}#icon-alert-triangle"></use>
          </svg>
        </div>
        <p>No recipes found for your query. Please try again!</p>
      </div>`
    );
  }
};

the function will call getJSON() function and try to fetch API with the search term, if it's right it will render RecipeList and display it. if it's wrong it should display an error.

const getJSON = async url => {
  const fetchRecipeList = await Promise.race([timeout(5), fetch(`${url}`)]);
  if (!fetchRecipeList.ok) throw new Error(`Something Went Wrong`);
  return await fetchRecipeList.json();
};

everything works ok but I get a GET https://forkify-api.herokuapp.com/api/search?q=asd 400 (Bad Request) logged into the console when i'm trying to search something that don't exist on purpose

why does my error handling doesn't replace this error? and how can I do that? I'm assuming that I need to add the try catch blocks to the getJSON as well but it's not working for me after trying couple of options, is it because it's in a promise.race() that it can't catch this error?

SuperStormer
  • 4,997
  • 5
  • 25
  • 35
LightSkyLiam
  • 11
  • 1
  • That's a horrible API. A `search` endpoint should never return an error when it couldn't find the search term, just an empty list of results. Also this is not a bad request, at best it's a "resource does not exist" error which should use HTTP status 404. – Bergi Jul 09 '23 at 11:19

0 Answers0