在请求完成之前无法计算 Polymer iron-ajax headers 属性答案

【问题标题】：Can't compute the Polymer iron-ajax headers property before request is done在请求完成之前无法计算 Polymer iron-ajax headers 属性
【发布时间】：2017-03-07 12:36:58
【问题描述】：

在以编程方式将用户令牌添加到 iron-ajax 元素的 headers 属性后，我尝试生成 Iron-Ajax 请求。问题是控制台返回了 401（未经授权）。但是，我确信令牌是正确的，问题一定是我实现它的方式。

出于测试目的，我在从 iron-storage 检索令牌后记录令牌，并记录我的计算函数应该绑定到 iron-ajax 的 headers 属性的返回。我在控制台中返回的所有结果都是正确的。此外，当我在 Iron-ajax 的标头中对令牌进行硬编码时，整个过程都有效。这就是为什么我确信问题来自其他地方。我现在在计算 headers 属性而不是在 iron-ajax 上设置 auto 之后创建请求，因为我认为问题可能是计算函数可能在请求完成后执行。但是我无法让它工作。

我希望有人能指出我的错误所在的方向。

<dom-module id="my-newsfeed-view">
  <template>

    <iron-ajax
      id="requestNews"
      url="http://api.mjp.dev/v1/news/"
      handle-as="json"
      headers='{{header}}'
      loading="{{isloading}}"
      last-response="{{response}}"></iron-ajax>

  </template>
  <script>
    Polymer({
    is: 'my-newsfeed-view',

    properties: {
      user: {
        type: String,
      },
      header: {
        computed: 'computeHeader(user)'
      },

    },

    ready: function() {
      // Get User key from the Storage
      this.$.localstorage.reload();
      // console.log('This token is:' + this.user.token);

      this.computeHeader();
      // console.log('{"Authorization": "Bearer ' + this.user.token + '"}');
      this.$.requestNews.generateRequest();
    },

    computeHeader: function(user) {
      return '{"Authorization": "Bearer ' + this.user.token + '"}';
    },

    });
  </script>
</dom-module>

【问题讨论】：

标签： javascript json ajax polymer polymer-1.0

【解决方案1】：

第一个问题是 computeHeader() 在应该返回 Object 时返回 string。 <iron-ajax> 将自动反序列化 Object，并将其合并到请求标头中。它应该是这样的：

computeHeader: function(user) {
  return {Authorization: 'Bearer ' + user.token};
}

您也不需要在ready() 中调用computeHeader()。

第二个问题是this.user是一个string，它被传递给computeHeader(user)，它假设它的user参数是一个包含token的对象。不清楚user 是如何在您的代码中设置的，但您可以考虑添加一个token 属性来替换computeHeader(token) 中的user。

演示：

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      headers: {
        computed: '_computeHeader(token)'
      },
      token: {
        type: String,
        value: '1234'
      }
    },
    _computeHeader: function(token) {
      return {Authorization: 'Bearer ' + token};
    },
    _onResponse: function(e) {
      console.log('response', e.detail.response);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax auto headers="[[headers]]" url="https://httpbin.org/get" on-response="_onResponse"></iron-ajax>
    </template>
  </dom-module>
</body>

codepen

【讨论】：

谢谢@tony19！我什至不知道为什么我将用户属性的类型更改为 String 而不是 Object。但是，出于某种原因，它同时适用于两者。我计算标题的方式是我猜的主要问题