繁体   English   中英

聚合物铁ajax响应代码

[英]Polymer iron-ajax response code

我的API调用使用的是Polymer 1.6和<iron-ajax> 我无法基于iron-ajax-error事件来区分这两种情况:

  1. 后端的基本身份验证失败(浏览器返回403 Forbidden
  2. 找不到服务(浏览器返回404 Not Found

在这两种情况下, 即使在身份验证问题中,服务器使用JSON主体进行响应,响应主体都是空的。

我想阅读响应状态代码,或者能够获得情况1的响应正文。

当服务器响应错误时,根据规范 ,响应正文应为null 但是, <iron-ajax>的事件详细信息仍提供对状态代码和状态文本的访问。

<iron-ajax>.response事件

<iron-ajax>.response事件的事件详细信息是<iron-request> 状态代码存储在<iron-request>.status ,相应的文本存储在<iron-request>.statusText

_onResponse: function(e) {
  const req = e.detail; // iron-request
  console.log('status', req.status, req.statusText);
}

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', _onResponse: function(e) { const req = e.detail; console.log('response', req.status, req.statusText); this.responseStatus = req.status; this.responseStatusText = req.statusText; }, _onError: function(e) { const req = e.detail.request; const err = e.detail.error; console.log('error', err, req.status, req.statusText); this.errorStatus = req.status; this.errorStatusText = req.statusText; this.errorMessage = err; } }); }); 
 <head> <base href="https://polygit.org/polymer+1.11.1/components/"> <script src="webcomponentsjs/webcomponents-lite.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 url="//httpbin.org/status/200" auto on-response="_onResponse" on-error="_onError"></iron-ajax> <div>'on-response' status: [[responseStatus]] ([[responseStatusText]])</div> </template> </dom-module> </body> 

<iron-ajax>.error事件

请注意<iron-ajax>.error事件的详细信息与<iron-ajax>.response的详细信息不同。 error的事件详细信息是具有以下形状的对象:

{
  error: String,
  request: iron-request
}

因此, <iron-ajax>.error事件处理程序可以按以下方式读取状态和状态文本:

_onError: function(e) {
  const req = e.detail.request; // iron-request
  console.log('status', req.status, req.statusText);
}

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', _onResponse: function(e) { const req = e.detail; console.log('response', req.status, req.statusText); this.responseStatus = req.status; this.responseStatusText = req.statusText; }, _onError: function(e) { const req = e.detail.request; const err = e.detail.error; console.log('error', err, req.status, req.statusText); this.errorStatus = req.status; this.errorStatusText = req.statusText; this.errorMessage = err; } }); }); 
 <head> <base href="https://polygit.org/polymer+1.11.1/components/"> <script src="webcomponentsjs/webcomponents-lite.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 url="//httpbin.org/status/404" auto on-response="_onResponse" on-error="_onError"></iron-ajax> <div>'on-error' status: [[errorStatus]] ([[errorStatusText]]) - [[errorMessage]]</div> </template> </dom-module> </body> 

码笔

当我想查看错误情况的响应时,我向error事件注册了一个处理函数,并查找e.detail.responsee.detail.request.xhr.response ,如下所示:

<dom-module id="my-login">
  <template>
    <iron-ajax url="http://some-url.com" 
           method="POST" 
           content-type="application/x-www-form-urlencoded" 
           body="{{reqBody}}" 
           handle-as="json"
           on-response="onResponse" 
           on-error="onError" id="xhr"></iron-ajax>
  </template>

  <script>
  Polymer({
      is: 'my-component',
      properties: {
        reqBody: {
          type: Object,
          value: {}
        }
      },
      onResponse: function(e) {
        console.log(e.detail.response);
      },
      onError: function(e) {
        // I think one of those two would be what you're looking for.
        console.log(e.detail.response);
        console.log(e.detail.request.xhr.response);
      }
  });
  </script>
</dom-module>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM