fetch() 的不一致行为

Question

我正在开发一个类似于 Gmail 的电子邮件应用程序。为了加载所有电子邮件，我使用 fetch() 并将所有未存档的电子邮件加载到网页上。同样，我使用 fetch() 将电子邮件标记为 archived/unarchived.

 archive.addEventListener('click', e=>{
        if(e.target.innerHTML === "Archive"){
          fetch(`/emails/${element.id}`, {
            method: 'PUT',
            body: JSON.stringify({
                archived: true
            })
          })
        }
        else{
          fetch(`/emails/${element.id}`, {
            method: 'PUT',
            body: JSON.stringify({
                archived: false
            })
          })
        }
        e.stopPropagation();
        load_mailbox('inbox');
});

load_mailbox('inbox') 获取收件箱中所有未归档的邮件。每当在电子邮件上单击存档按钮时，都应加载收件箱并且该特定电子邮件不应该可见。但是我需要点击两次存档按钮才能正确加载收件箱。

为了解决这个问题，我在 load_mailbox('inbox') 中添加了 1000 毫秒的超时时间，效果非常好。现在收件箱会正确，就像没有存档的电子邮件一样。

archive.addEventListener('click', e=>{
    if(e.target.innerHTML === "Archive"){
      fetch(`/emails/${element.id}`, {
        method: 'PUT',
        body: JSON.stringify({
            archived: true
        })
      })
    }
    else{
      fetch(`/emails/${element.id}`, {
        method: 'PUT',
        body: JSON.stringify({
            archived: false
        })
      })
    }
    e.stopPropagation();
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(()=>{load_mailbox('inbox')}, 1000);
  });

我不明白为什么需要超时和更简洁的方法来解决它。任何帮助将不胜感激。

Answer 1

fetch 是同步的 - 您的其余代码将运行在等待 http 请求完成时。听起来你只需要等待调用完成，一个简单的方法是让你的函数异步，然后 await 获取调用：

archive.addEventListener('click', async (e) => {
  e.stopPropagation();
  if(e.target.innerHTML === "Archive"){
    await fetch(`/emails/${element.id}`, {
      method: 'PUT',
      body: JSON.stringify({
          archived: true
      })
    })
  }
  else{
    await fetch(`/emails/${element.id}`, {
      method: 'PUT',
      body: JSON.stringify({
          archived: false
      })
    })
  }

  load_mailbox('inbox');
});

fetch() 的不一致行为

Inconsistent behavior of fetch()

javascript

event-handling

fetch-api