当无法到达 API 时，catch 不起作用

Question

我想弄清楚为什么在无法到达 API 时我的捕获永远不会发生。下面是我的功能。需要明确的是，如果达到 API 则该函数会创建多个元素，但如果未达到 return 则应显示错误消息。提前致谢

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();

Answer 1

你的外部 .then 和 .catch 应该是平行的，但我们只有内部 .then 有 .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();

当无法到达 API 时，catch 不起作用

catch doesn't work when the API can't be reached

javascript

api

try-catch