返回的對象在自定義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); 
});