javascript - VueJS 异步组件数据和 promise

Question

试用 VueJS 2.0 RC，并使用 fetch API 为某些组件加载一些数据。这是一个模拟示例:

const Component = {
  template: '#comp',
  name: "some-component",
  data: function () {
    return {
      basic: data.subset,
      records: function () {
        return fetch('/datasource/api', {
          method: 'get'
        }).then(function (response) {
          return response.json();
        }).then(function (response) {
          if (response.status == "success") {
            return response.payload;
          } else {
            console.error(response.message);
          }
        }).catch(function (err) {
          console.error(err);
        });
      }
    }
  }
};

data 对象是一个全局应用程序状态，在应用程序初始化之前定义，组件中只需要它的一个子集，因此就是那个部分。组件的主要数据集来 self 尝试调用的另一个端点。但是，data 属性需要一个对象，它返回一个 Promise，它不能在模板中的循环上下文中真正使用以进行渲染等(例如 v-for="记录在案”)

我是不是用错了方法？获取数据 records 属性在完全获取后进行更新的方法是什么？有没有办法强制代码停止，直到 promise 解决(有效地使其同步)？无论如何，如果没有数据，该组件将毫无用处，因此无论如何都需要等待一段时间才能使用。

在不使用 vue-async 或 vue-resource 等插件的情况下异步填充组件数据字段的正确方法是什么？

(我知道我可以使用非 promise ajax 调用的 XHR/jQuery 方法来执行此操作，但我想学习如何使用 fetch 来执行此操作)

---

更新:我尝试定义一个创建的钩子(Hook)，以及一个加载数据的方法，like this但没有骰子 - 在我自己的实验中，记录属性在加载后无法更新。它不会改变，即使数据已成功获取(成功登录到控制台)。

可能与我使用 vue-router 和我正在处理的组件有关，该组件在单击链接时触发，而不是作为常规 Vue 组件。进一步调查...

---

更新 #2:如果我继续研究上面的 jsfiddle 方法并将 this.records 和 response.payload 记录到控制台，它会显示正在填充的记录对象。但是，这似乎并没有触发模板或组件本身的更改——使用 Vue 开发工具进行检查，records 属性仍然是一个空数组。事实上，如果我在调用它的模板中添加一个方法 logstuff 和一个按钮，然后让这个方法将 this.records 记录到控制台中，它会记录一个观察者空数组:

现在我想知道为什么组件的数据属性即使在显式设置为另一个值后也不会更新。尝试为触发 reload 方法的 $route 设置观察器，但没有骰子 - 该路由的每个后续加载确实重新发出提取，并且控制台记录this.records 被填充(从 fetch 中)，但“真实的”this.records 仍然是一个空数组。

Answer 1

解决方案是 jsfiddle 方法，但有所不同。这部分:

reload: function () {
      fetch('/data/api', {
        method: 'get'
      }).then(function (response) {
        return response.json();
      }).then(function (response) {
        if (response.status == "success") {
          this.records = response.payload;
        } else {
          console.error(response.message);
        }
      }).catch(function (err) {
        console.error(err);
      });
    }

在提取后设置 this.records 值的部分需要一个 .bind(this)，如下所示:

reload: function () {
      fetch('/data/api', {
        method: 'get'
      }).then(function (response) {
        return response.json();
      }).then(function (response) {
        if (response.status == "success") {
          this.records = response.payload;
        } else {
          console.error(response.message);
        }
      }.bind(this)).catch(function (err) {
        console.error(err);
      });
    }

This post是它让我点击的原因。

经验教训:在现代 JS 中，始终牢记范围。