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对象是一个全局应用程序状态，在应用程序初始化之前定义，并且组件中只需要它的一部分，因此该部分。组件数据的主要集合来自我试图调用的另一个端点。但是，data属性需要一个对象，并且它正在返回一个Promise，它无法在模板中用于渲染等的循环上下文中真正使用（例如v-for="record in records"）

我是以错误的方式来做这件事的吗？完全获取后，数据records属性更新的方法是什么？有没有办法强制代码停止，直到promise解决（有效地使其同步）？无论如何，该组件没有数据是无用的，因此无论如何都可以使用等待时间。

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

（我知道我可以使用非承诺ajax调用的XHR / jQuery方法来做到这一点，但我想学习如何使用fetch做到这一点）

更新：我尝试定义一个创建的钩子，以及一个加载数据的方法，like this但没有骰子 - 在我自己的实验中，一旦加载了records属性就无法更新。即使数据已成功获取（成功登录到控制台），它也不会更改。

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

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

现在我想知道为什么组件的数据属性即使在显式设置为另一个值后也不会更新。尝试为$route设置一个触发reload方法的观察者，但没有骰子 - 该路由的每次后续加载确实重新发出了获取，并且控制台记录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);
      });
    }

在获取后设置.bind(this)值的部分需要this.records，如下所示：

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中，始终牢记范围。

VueJS异步组件数据和承诺

1 个答案: