Блог

Главная - Вопросы по программированию - Простая выборка для котенка img

Простая выборка для котенка img

#javascript #arrays #api #fetch-api

Вопрос:

я знаю, что я сделал со своим кодом, но вчера эта выборка работала. Я извлекаю фотографию котенка из API. Сегодня, когда я попробовал его не работать, он говорит, что URL-адрес не определен. Та же проблема у моего друга из буткемпа. Что-то происходит с API.

 function getKitties() {
  fetch("https://api.thecatapi.com/v1/images/search")
    .then((response) => {
      (response.json())
      .then((response) => {
        (console.log(response)

        )
      })
      var cat = response[0].url;
    })
  var imgcat = document.createElement("img");
  imgcat.src = cat;
  var dtag = document.createAttribute("data-tag");
  dtag.value = "img-kitty";
  imgcat.setAttributeNode(dtag);
  imgcat.innerHTML = " "
  document.body.appendChild(imgcat);

} 
 <button id="searchKitty" onclick="getKitties()">Click me</button>

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

1. Рабочая демонстрация — попробуйте сравнить свой код javascript с тем, который приведен в демо. Это должно дать вам представление о том, почему ваш код не работает.

Ответ №1:

Вам нужно перенести действие в ТО

Вот версия, в которой используются рекомендуемые методы, addEventListener и catch, а также упрощенный атрибут данных

 document.getElementById('searchKitty').addEventListener('click', e => {
  fetch('https://api.thecatapi.com/v1/images/search')
    .then(response => response.json())
    .then(response => {
      console.log(response);
      var cat = response[0].url;
      var imgcat = document.createElement("img");
      imgcat.src = cat;
      imgcat.dataset.tag = "img-kitty";
      imgcat.setAttribute("alt",response[0].breeds.join("") || "Cat")
      document.body.appendChild(imgcat)
    })
    .catch(error => console.log(error.message));
}) 
 img {
  height: 100px;
  margin: 5px;
} 
 <button id="searchKitty" type="button">Click me</button>
<hr/>

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

1. Вероятно, вам следует исправить цепочку обещаний-нет необходимости помещать then() вызов метода в функцию обратного вызова первого then() метода, когда вы можете просто вернуться response.json() из обратного вызова первого then() метода и связать второй then() метод вместо его вложения, и в идеале также должен быть catch() метод.

2. @Yousaf Спасибо, я это пропустил. Теперь я оптимизировал код

Метки: