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

Question

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

出于测试目的，我在从 iron-storage 检索令牌后记录它，并记录 return 我的计算函数应该绑定到 headers 属性的 [=21] =].我在控制台中 returned 得到的所有结果都是正确的。此外，当我在 iron-ajax 的 headers 中硬编码令牌时，整个过程都有效。这就是为什么我确定问题来自其他地方。我现在在计算 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>

Answer 1

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

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

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

第二个问题是 this.user 是一个 string，它被传递给 computeHeader(user)，它假设它的 user 参数是一个 object包含 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

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

Can't compute the Polymer iron-ajax headers property before request is done

javascript

ajax

json

polymer

polymer-1.0