如何在 created 中重新加载 GET 请求。 Vue.js答案

【问题标题】：How to reload a GET request in created . Vue.js如何在 created 中重新加载 GET 请求。 Vue.js
【发布时间】：2020-08-24 09:46:28
【问题描述】：

我正在从我的 Rails API 后端获取数据，我想要做的是每 15 秒重新加载一次获取请求，所以如果后端发生变化（例如，我在另一条路由中向我的后端发出 post 请求）它重新加载并获取当前数据。

我创建的：

created() {


    if (!localStorage.signedIn) {
      this.$router.replace("/");
    } else {
      this.$http.secured
        .get("/api/v1/records")
        .then(response => {
          console.log(response.data);
          this.records.splice(0, this.records.length - 1, ...response.data);
        })
        .catch(error => this.setError(error, "Something went wrong"));
      this.$http.secured
        .get("/api/v1/templates")
        .then(response => {
          this.templates = response.data;
        })
        .catch(error => this.setError(error, "Something went wrong"));
      this.$http.secured
        .get("/api/v1/data")
        .then(response => {
          this.datas = response.data;
        })
        .catch(error => this.setError(error, "Something went wrong"));
    }
  },

您能帮我实现一个 setInterval 到我的 get 请求吗？

谢谢

【问题讨论】：

标签： javascript api vue.js get reload

【解决方案1】：

尝试使用 setInterval，如：

mounted() {
    this.intervalData = setInterval(this.getdata, 15000)
  },
  destroyed() {
    clearInterval(this.intervalData)
  },
  methods: {
    getData() {}
  },

更智能的解决方案可能是：在 nuxt 代理服务器或后端使用 POST 请求，例如 axios.post('/data', payload) 并连接 websockets，您可以使用 pusher 来实现。最终的逻辑是：用户添加一些数据 => 发布到服务器 => 服务器发出 websockets 事件 => vuex 监听事件并且数据将在所有选项卡中反应。

【讨论】：