Блог

Главная - Вопросы по программированию - catch не работает, когда API недоступен

catch не работает, когда API недоступен

#javascript #api #try-catch

Вопрос:

я пытаюсь понять, почему мой улов никогда не происходит, когда API недоступен. Ниже приведена моя функция. Чтобы было понятно, функция создает ряд элементов, если API достигнут, но должна возвращать сообщение об ошибке, если это не так. Заранее спасибо

 const itemList = document.querySelector(".item-list");

function displayItems() {
  // Reaching API
  fetch("http://localhost:3000/api/cameras",{ method: 'GET'} )
  .then((response) =>
    response.json().then((data) => {
        for (let object of data) {
          // Create a card for each data element (Links, name, price and img only)
            const linkID = document.createElement("a");
            const createDiv = document.createElement("div");
            const itemImg = document.createElement("div");
            const details = document.createElement("div");
            //Manage all created elements
            itemList.appendChild(linkID);
            linkID.appendChild(createDiv);
            createDiv.appendChild(itemImg);
            createDiv.appendChild(details);
            //Give a class to each created element
            createDiv.classList.add("item");
            itemImg.classList.add("item__photo");
            details.classList.add("item__details");
            //Set up values inside each of the previous elements
            linkID.setAttribute('href', './Pages/product.html'  '?id='   object._id)
            itemImg.innerHTML = `<img src="${object.imageUrl}" alt="${object.name}"/>`;
            details.innerHTML = `<h3>${object.name}</h3>`   `<span>${object.price/100} € </span>`;
          }
      })
      .catch (() => {
        itemList.innerHTML = "Nous n'avons pas pu afficher de produits, revenez ultérieurement";
      })
  );
}
displayItems();

Комментарии:

1. Это цепочка catch() json() , она будет использоваться, если синтаксический анализ тела не удастся; цепочка к fetch().then(r=>r.json().then()).catch(...)

2. Вы .catch() получаете ошибку только от response.json() обещания (или его then обработчика), но не от обещания, возвращенного само по fetch() себе.

Ответ №1:

Твое внешнее .тогда и .catch должны были быть параллельны, но у нас был .catch для там только для внутреннего .затем, поэтому, потянув его и сделав его для внешнего .catch, он работает. См. исправленный код.

 const itemList = document.querySelector(".item-list");

function displayItems() {
  // Reaching API
  fetch("http://localhost:3000/api/cameras",{ method: 'GET'} )
  .then((response) =>
    response.json().then((data) => {
        for (let object of data) {
          // Create a card for each data element (Links, name, price and img only)
            const linkID = document.createElement("a");
            const createDiv = document.createElement("div");
            const itemImg = document.createElement("div");
            const details = document.createElement("div");
            //Manage all created elements
            itemList.appendChild(linkID);
            linkID.appendChild(createDiv);
            createDiv.appendChild(itemImg);
            createDiv.appendChild(details);
            //Give a class to each created element
            createDiv.classList.add("item");
            itemImg.classList.add("item__photo");
            details.classList.add("item__details");
            //Set up values inside each of the previous elements
            linkID.setAttribute('href', './Pages/product.html'  '?id='   object._id)
            itemImg.innerHTML = `<img src="${object.imageUrl}" alt="${object.name}"/>`;
            details.innerHTML = `<h3>${object.name}</h3>`   `<span>${object.price/100} € </span>`;
          }
      }))
  .catch (() => {
        itemList.innerHTML = "Nous n'avons pas pu afficher de produits, revenez ultérieurement";
      });
}
displayItems();

Комментарии:

1. Теперь это не показывает сообщение об ошибке, когда API доступен, но возвращает ошибку.

2. Я имею в виду, что и то, и другое было бы необходимо, учитывая вариант использования, но я просто исправил его, чтобы посмотреть, что не так,

3. При правильной цепочке обещаний для улавливания обеих ошибок потребуется только один обработчик.

4. Спасибо за вашу помощь, теперь все работает по плану. Нужно будет отредактировать все мои уловки для других функций, потому что они следуют той же модели

Метки: ,