带有 ajax 请求的 Polymer 1.0 计算变量答案

【问题标题】：Polymer 1.0 computed variable with ajax request带有 ajax 请求的 Polymer 1.0 计算变量
【发布时间】：2025-11-29 10:10:01
【问题描述】：

我正在尝试基于以另一个变量作为属性的 ajax 调用来计算聚合物变量。

例如，我想传递一个像这样的变量：

<my-custom-element user-email="test@test.com"></my-custom-element>

然后在 <my-custom-element> 模板上计算另一个名为 exists 的布尔变量，并使用对我的服务器用户列表的 ajax 请求填充它。

当我尝试常规的 ajax 调用时，我什么也得不到...

 Polymer({
  is: "my-custom-element",

  properties: {
    userEmail: {
      type: String,

    },
    exists: {
      type: Boolean,
      computed: '_getExistsFromEmail(userEmail)'
    }
  },
  _getExistsFromEmail: function(userEmail) {
    var xhr = new XMLHttpRequest();

    xhr.open('POST',
        encodeURI('http://api.test.im/land_emails'));
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var that = this;
    xhr.onload = function () {
      var responseJson = JSON.parse(xhr.responseText);

      if (xhr.status === 200 || xhr.status === 201) {
        if (responseJson.status) { // If user exists

          return true;

        }
        else { // User does not exists
          return false;
        }

      }

    };

    var params = "email=" + userEmail;
    xhr.send(encodeURI(params));
  }})

这不起作用，并且未定义变量。我怎样才能使它成为可能？是吗？

【问题讨论】：

您的返回语句是针对 onload 函数的，而不是针对原始函数的。

标签： polymer polymer-1.0

【解决方案1】：

这里的问题是由于ajax回调是异步的。您在此函数xhr.onload = function () { 中定义的内容将在ajax 调用完成时触发。这里返回true或false并没有将返回值赋值给exists的效果。而是将_getExistsFromEmail 的返回值分配给未定义的exists。而且由于异步性，也不可能像那样定义它。但是，您可以按如下方式实现您想要的（假设您的 ajax 代码按预期工作）。

Polymer({
    is: "my-custom-element",

    properties: {
        userEmail: {
          type: String
        },
        exists: {
          type: Boolean,
        }
    },

    observers: ['_getExistsFromEmail(userEmail)'],

    _getExistsFromEmail: function(userEmail) {
        var xhr = new XMLHttpRequest();

        xhr.open('POST',
            encodeURI('http://api.test.im/land_emails'));
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        var that = this;
        xhr.onload = function () {
          var responseJson = JSON.parse(xhr.responseText);

          if (xhr.status === 200 || xhr.status === 201) {
            if (responseJson.status) { // If user exists

              this.exists = true;

            }
            else { // User does not exists
               this.exists = false;
            }

          }

        }.bind(this);

        var params = "email=" + userEmail;
        xhr.send(encodeURI(params));

    }
});

每当userEmail 更改时，都会调用_getExistsFromEmail。在那里，每当收到 ajax 响应时，exists 就会更新。

【讨论】：