返回的对象在自定义ajax服务中未定义

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变量中看到一个“undefined”值。

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

Answer 1

那是因为你做的异步调用，这意味着它不会立即返回结果。

解决此问题的唯一方法是接收从$.ajax返回的承诺对象&使用.done()函数就可以接收成功的数据。

你需要做什么：

• 移动done() & fail()外部服务工厂。
• 将ajax promise对象一直返回给消费者，即控制器。

JS代码：

//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仅适用于$.ajax api？那么我建议你使用$http，其API与$.ajax相同。 ref：https://docs.angularjs.org/api/ng/service/ $ http

Answer 2

您已经构建了角度应用程序，因此使用$http指令可以方便地进行ajax调用。注入$http是你的服务，那么你可以处理响应这样：

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