时间戳

首页 > 解决方案 > 为什么我会收到来自 api 调用的重复响应？

javascript - 为什么我会收到来自 api 调用的重复响应？

问题描述

我正在发送一个 api 请求并从数据中取回重复或重复的响应。我为每只狗发送狗名和 id 的 api 请求，并将数据放在 html 位置。第一只狗来了三次，然后第二只狗来了，然后第一只狗又来了，第三只狗又来了，第二只狗又来了，依此类推。

我已经尝试过 fetch api 和 async await ，它们都做同样的事情。Iv,e 还使用了 map、forEach 和 for in，结果都相同。

       fetch(api)
       .then(response =>{
           return response.json();
       })
       .then(data => {
          console.log(data)
          let dogs = data;
          let output = '';
          dogs.forEach(dog => {
              console.log(dog.id);
              output+=`
              <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
              <div className="card">
                <img src="gdogs.jpg" className="img-card-top" style="height:14rem"alt="dogs"/>
                  <div className="card-body text-capitalize">
                    <h6 class="name-title">${dog.name}</h6>
                    <h6 class="id">${dog.id}</h6>
                    <h6 className="text-warning text-slanted">Provided by Dog API</h6>
                  </div>
                  <div className="card-footer">
                    <button type="button" className="btn btn-primary text-capitalize" ></button>
                    <a href="https://api.thedogapi.com" className="btn btn-success mx-2 text-capitalize" target="_blank" rel="noopener noreferrer">dog api</a>
                  </div>
              </div>

            </div>

              `
              document.getElementById('dog-info').insertAdjacentHTML('beforeend', output)
          });

我只是希望狗按时间顺序输出而不重复。我没有收到任何错误消息。任何帮助将不胜感激。提前致谢。

标签： javascriptapifetch

解决方案

您正在将每只狗的 HTML 以及之前的每只狗添加到output变量中。除此之外，您正在insertAdjacentHTML反复运行呼叫，每只狗一次。这意味着每次您将 的内容添加output到页面中时，您都会获得全部内容，包括到目前为止处理的每只狗，而不仅仅是当前的。

有两种明显的方法可以解决这个问题。任何一个

1) 删除ie+中的，这样 output` 每次都会被覆盖而不是附加到。+=output =

或者

insertAdjacentHTML2)在 foreach 循环结束后将调用移至to ，这样output当您完成为所有狗生成 HTML 时，您只需将 的内容写入页面一次。

推荐阅读