如何在获取时避免数据重复?

时间:2019-12-16 08:01:56

标签: javascript fetch

我有一个简单的获取函数,该函数获取数据(来自db的消息)并将其放入数组中,以使用简单的JS显示。问题是我每2秒调用一次此功能,以检查是否有新消息。但是,当我这样做时,我复制了我的消息,并且消息不断添加而不是替换。我正在努力了解我该怎么做才能改变,而不是增加。

(一个小问题,对不起)

const list = document.getElementById('message-list');

const getData = () => {
  fetch('/messages')
  .then((resp) => resp.json()) 
  .then(function(data) {
    console.log(data)

    for (let i = 0; i < data.length; i++) {

        const listItem = document.createElement('li');
        listItem.innerText = data[i].message;
        const delButton = document.createElement('button');
        delButton.innerHTML = 'Delete';
        delButton.addEventListener('click', ()=>{
          const message_id = data[i].message_id;
          deleteItem(message_id);
        })
      listItem.appendChild(delButton);
      list.appendChild(listItem)
      }
    })
}

setInterval(getData,2000)

1 个答案:

答案 0 :(得分:0)

设置一组到目前为止已处理的message_id,然后在进一步调用时忽略与message_id相匹配的消息:

const seenIds = new Set();
const getData = () => {
  fetch('/messages')
    .then((resp) => resp.json())
    .then(function(data) {
      data
        .filter(({ message_id }) => !seenIds.has(seenIds))
        .forEach(({ message, message_id }) => {
          seenIds.add(message_id);
          const listItem = document.createElement('li');
          listItem.innerText = message;
          const delButton = document.createElement('button');
          delButton.textContent = 'Delete';
          delButton.addEventListener('click', () => {
            deleteItem(message_id);
          });
          listItem.appendChild(delButton);
          list.appendChild(listItem)
        });
      });
};

也就是说,最好更改后端,以便它可以为您过滤项目,而不是通过网络发送继续被忽略的对象。