zurückgegebenes Objekt ist in einem benutzerdefinierten AJAX-Dienst nicht definiert

Question

Ich habe einen AngularJS-Dienst erstellt, der eine AJAX-Anforderung an den Server sendet und das Antwortobjekt an den Controller zurückgibt. Unten ist mein Service

app.factory('ajaxService', function() { 
    return { 
     ajaxcall: function(url, type, data, handler) { 
      $.ajax({ 
       url: url, 
       type: type, 
       data: data, 
       beforeSend: function(xhr) { 
       xhr.setRequestHeader("X-OCTOBER-REQUEST-HANDLER", handler); 
       xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
       } 
      }) 
      .done(function(response) { 
       console.log("ajaxService done: "); 
       console.log(response); 
       return response; 
      }) 
      .fail(function(response) { 
       console.log("in onCheckUser-error: ajaxService "); 
      }); 

     } 
    } 
}); 

Der Regler wie unten

var app = angular.module('starter', []) 

app.controller('myCtrl', function(ajaxService) { 
var res = {}; 
res = ajaxService.ajaxcall("https://www.travelmg.in/check-login",'POST','',"onCheckLogin"); 
console.log(res); 
}); 

hier definiert ist, erhalte ich die erwartete Antwort in der Konsole im ajaxService Service. Wenn ich die Antwort zurückgebe, sehe ich einen "undefinierten" Wert in der res-Variablen in der Konsole.

Ich verstehe nicht, warum die Res-Variable nicht definiert ist. Bitte schlagen Sie vor

Answer 1

Das ist, weil Ihr einen asynchronen Anruf tätigen, was bedeutet, es wird das Ergebnis nicht sofort zurück.

einzige Weg, dies zu lösen, ist das Versprechen Objekt aus $.ajax & verwenden, um die .done() Funktion auf sie zurück erhalten die erfolgreichen Daten zu empfangen.

Was Sie tun müssen:

• das Verschieben done() & fail() außerhalb Service-Fabrik.
• das Ajax-Versprechen-Objekt den ganzen Weg zum Verbraucher, d.

JS Code:

//service factory code 
return { 
    ajaxcall: function(url, type, data, handler) { 
     return $.ajax({ 
      url: url, 
      type: type, 
      data: data, 
      beforeSend: function(xhr) { 
      xhr.setRequestHeader("X-OCTOBER-REQUEST-HANDLER", handler); 
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
      } 
     }); 
    } 
} 

//controller code 
app.controller('myCtrl', function(ajaxService) { 
    var res = {}; 
    ajaxService.ajaxcall("https://www.travelmg.in/check- login",'POST','',"onCheckLogin") 
    .done(function(response) { 
      console.log("ajaxService done: "); 
      console.log(response); 
      //return response; // dont return instead process the result here 
    }) 
    .fail(function(response) { 
      console.log("in onCheckUser-error: ajaxService "); 
    }); 
}); 

Hinweis:

• würde ich persönlich lieber jquery und angularjs Bibliothek Dont Mischen, es sei denn jquery wirklich für einige Drittanbieter-Bibliothek benötigt wird. Beide sind zwei verschiedene Frameworks mit unterschiedlicher Ideologie, also mischen Sie sie nicht.

• auch wenn Sie sich auf jquery nur für $.ajax api beziehen? dann würde ich vorschlagen, dass Sie $http verwenden, dessen API dasselbe wie $.ajax ist. Ref: https://docs.angularjs.org/api/ng/service/ $ http

Answer 2

Sie haben die Anwendung in eckigen so gebaut, es wäre bequem, $http Direktive zu verwenden, um Ajax Anrufe zu machen. Injizieren $http Ihr Dienst ist, dann können Sie die Antwort als solche behandeln:

ajaxService.ajaxcall("https://www.travelmg.in/check-login",'POST','',"onCheckLogin").then(function(response) { 
    console.log(response.data); 
});