时间戳

首页 > 解决方案 > 无法访问 API 时 catch 不起作用

javascript - 无法访问 API 时 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();

标签： javascriptapitry-catch

解决方案

您的外部 .then 和 .catch 应该是平行的，但我们有 .catch 仅用于内部 .then 所以在拉动它并使其用于外部 .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();

推荐阅读