Question

与Api合作时，我还很新。我正在尝试查询URL字符串并返回一些Gif。

const gifForm = document.querySelector("#gif-form");
gifForm.addEventListener("submit", fetchGiphs);

function fetchGiphs(e) {
  e.preventDefault();
  const searchTerm = document.querySelector("#search").value;
  fetch(`https://api.giphy.com/v1/gifs/search?&q=${searchTerm}&limit=100&api_key=3mIxmBZUIIPyb8R69gtxaW8Hsh74dFKV`)
  .then((response) => {return response.json(); })
  .then(data => showGiphs(data.images.fixed_width.url))
  .then(err => console.log(err));
}

function showGiphs(fixed_width) {
  const results = document.querySelector("#results");

  let output = '<div class="container">';
  fixed_width.forEach((url) => {
    console.log(url);
    
    output += `
  <img src="${data.images.original.fixed_width_url}"/>

`;
  });
  document.getElementById('results').innerHTML = output;
}

<form id="gif-form">
  <input type="text" id="search">
  <input type="submit" value="find">
</form>
<div id="results"></div>

如果我从提取中删除.then(data => showGiphs(data.images.fixed_width.url))，而只是console.log数据，它将返回我想要的搜索结果。但是，当我尝试映射到gif“ data.images.fixed_width.url时，出现控制台错误“未捕获（承诺）TypeError：无法读取未定义的属性'fixed_width'” 在fetch.then.then.data

任何帮助或朝着正确的方向前进都将非常棒！谢谢！另外，如果您想查看演示，可以在这里查看它：https://codepen.io/Brushel/pen/jKgEXO?editors=1010

Answer 1

响应具有一个data属性，该属性是一个数组。如果要该数组中的第一个GIF，则如下所示：data.data[0].images.fixed_width.url。因此，整行为.then(data => showGiphs(data.data[0].images.fixed_width.url))。

Answer 2

您的代码有几个问题。

API的响应是一个对象，该对象中有data数组，该数组中的每个元素都是有关每个gif的信息。

尝试：

const gifForm = document.querySelector("#gif-form");
gifForm.addEventListener("submit", fetchGiphs);

function fetchGiphs(e) {
    e.preventDefault();
    const searchTerm = document.querySelector(".search").value;
    fetch(`https://api.giphy.com/v1/gifs/search?&q=${searchTerm}&limit=100&api_key=3mIxmBZUIIPyb8R69gtxaW8Hsh74dFKV`)
    .then((response) => {return response.json(); })
    .then((resp => {
        // Here we get the data array from the response object
        let dataArray = resp.data
        // We pass the array to showGiphs function
        showGiphs(dataArray);
    }))
    .catch(err => console.log(err)); // We use catch method for Error handling
}

function showGiphs(dataArray) {
  const results = document.querySelector(".results");
  let output = '<div class="container">';
  dataArray.forEach((imgData) => {
    output += `
  <img src="${imgData.images.fixed_width.url}"/>
`;
  });
  document.querySelector('.results').innerHTML = output;
}

    <form id="gif-form">
    <input type="text" class="search">
    <input type="submit" value="find">
</form>
<div class="results"></div>

我希望这会有所帮助。

使用获取Api进行Giphy搜索

2 个答案: