Question

我创建了一个AngularJS服务，它向服务器发出ajax请求，并将响应对象返回给控制器。以下是我的服务

   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 ");  
            });

        }
   }
});

控制器定义如下

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);
});

在这里，我在ajaxService服务的控制台中得到了预期的响应。当我返回响应时，我在控制台中看到res变量中的“未定义”值。

我不明白为什么res变量未定义。请建议

Answer 1

您已经使用angular构建了应用程序，因此使用$http指令进行ajax调用会很方便。注入$http是您的服务，然后您可以处理响应：

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

Answer 2

这是因为您进行异步调用，这意味着它不会立即返回结果。

解决此问题的唯一方法是接收从$.ajax＆amp;使用.done()函数来接收成功的数据。

您需要做什么：

移动done()＆amp; fail()外部服务工厂。
将ajax promise对象一直返回给使用者，即controller。

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 ");  
     });
});

注意：

我个人不喜欢混合jquery和angularjs库，除非某些第三方库真的需要jquery。两者都是具有不同意识形态的两种不同框架，所以不要混用它们。
如果您仅针对jquery api引用$.ajax？那么我建议你使用$http，其API与$.ajax相同。参考：https://docs.angularjs.org/api/ng/service/ $ http

在自定义ajax服务

2 个答案: