Ext JS 4 - Ajax和Rest代理處理服務器端異常和消息的方法

<span style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);">可能要處理的情況：</span><br style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);" /><span style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);">success（成功）——Ext處理</span><br style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);" /><span style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);">failure（失敗），由於通訊問題——Ext處理</span><br style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);" /><span style="color: rgb(102, 102, 102); font-family: 微軟雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(244, 247, 231);">failure（失敗），由於服務器端異常——開發人員人員必須處理的響應失敗……</span> 

<strong>方案一</strong>

//Ajax Response Error Handler
                  Ext.Ajax.on('requestexception', function(conn, response, options, eOpts) {
                         var error = response.status + ' - ' + response.statusText;
                         console.log('Ajax Request Exception! '+error);
                         if (response.status != 200) {
var errorData = Ext.JSON.decode(response.responseText);  console.log('ajax req error:'+errorData.message);
                      console.log('Ajax request Error', response.status);
                           }
                  });

<strong>方案二</strong>

<pre name="code" class="javascript">store.on('loadexception',
 <span style="white-space:pre">	</span>function(a,conn,resp) {
 <span style="white-space:pre">		</span>if (resp.status == '304') {
    <span style="white-space:pre">			</span>Ext.Msg.alert('Content has not changed');
 <span style="white-space:pre">		</span>}else if(resp.status == '200') {
    <span style="white-space:pre">			</span>return; //Do nothing
<span style="white-space:pre">		</span>}else if (resp.status == '401') {
       <span style="white-space:pre">			</span>Ext.Msg.alert('Authentication required - You need to Login');
<span style="white-space:pre">		</span>}else if (resp.status == '302') {
<span style="white-space:pre">			</span>errorDialog.body.update('Session Has Expired');
<span style="white-space:pre">			</span>errorDialog.show();
<span style="white-space:pre">		</span>}else if(resp.status == '500') {
<span style="white-space:pre">			</span>errorDialog.body.update(resp.responseText);
<span style="white-space:pre">			</span>errorDialog.show();
<span style="white-space:pre">		</span>}else{
<span style="white-space:pre">			</span>errorDialog.body.update('An uncaught exception has occured');
<span style="white-space:pre">			</span>errorDialog.show();
<span style="white-space:pre">	</span>}
}<strong>
</strong>

<strong>方案三</strong>

function requestMessageProcessor(proxy, response) {
         if (response && proxy) {                   
                 try {                                              
                          var responseData = proxy.reader.getResponseData(response);
                         
                          if (responseData.message) {
                                   var messageDescription = 'Information'; // title of the alert box
                                   var messageIcon = Ext.MessageBox.INFO;
                                  
                                   if (!responseData.success)
                                   {
                                            var messageDescription = 'Error';
                                            var messageIcon = Ext.MessageBox.ERROR;
                                   }
                                  
                                   Ext.MessageBox.show({
                                            title: messageDescription,
                                            msg: responseData.message,
                                            buttons: Ext.MessageBox.OK,
                                            icon: messageIcon
                                   });
                          }
                 }
                 catch(err) {
                          // Malformed response most likely
                          console.log(err);
                 }
         }
}
And here’s the part which should reside in proxy:


proxy: {
 ...
 listeners: { 
  exception: function(proxy, response, options) {
   requestMessageProcessor(proxy, response);
  }
 },
 afterRequest: function(request, success) {
  requestMessageProcessor(request.scope, request.operation.response);
 }
}