时间戳

首页 > 解决方案 > 使用 fetch api 发布到服务器

javascript - 使用 fetch api 发布到服务器

问题描述

我试图将帖子的最喜欢状态更改为我的服务器true或false我的服务器上，但我一遍又一遍地遇到同样的问题。我点击收藏按钮，果然收藏状态发生了变化。但是当我再次单击它时，什么也没有发生。没有任何变化。然后，如果我删除静态缓存并单击收藏按钮，它确实会更改收藏状态，但只是第一次。基本上每次我需要更改状态时，我都必须删除缓存。当我尝试向服务器添加评论时，也会发生同样的事情。这是我将收藏夹添加到服务器的代码

static setFavorite() {
      const id = self.restaurant.id;
      const fav_state = self.restaurant.is_favorite;
      const fav_div = document.getElementById('fav_div');
      let image = document.getElementById('fav_img');
      console.log("fav", fav_state);

      if (fav_state == 'true') {
    DBHelper.toggleFavorite(id, false);
    } else {
      DBHelper.toggleFavorite(id, true);
    }
  }

  static toggleFavorite(id, value) {
    fetch('http://localhost:1337/restaurants/' + id + '/?is_favorite=' + value,
      {
        method: 'POST',
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        value: JSON.stringify(value)
      })
    .then(r => r.json())
      .then(res => console.log(value));
  }

标签： javascriptfetchprogressive-web-apps

解决方案

感觉这里缺少一些代码。看起来 setFavorite() 函数fat_state从该值获取self.restaurant.is_favorite并将该值传递给toggleFavorite. 但是您提供的代码中没有任何内容显示如何self.restaurant.is_favorite修改。

我不确定在您的代码中您是否忘记将其翻转为 from truetofalse和 from falseto true。

另外请注意（为了在您的代码中使用更好的 javascript）不要使用 ==true并且可能尝试重构您的代码以进行严格比较（=== true）以避免任何副作用。也不确定为什么您需要let image在代码中以及您提供的与图像相关的代码。

推荐阅读