Javascript 使用回调函数调用Ajax服务

我尝试使用ajax调用web服务，然后将结果传递给angular控制器。我无法将回调函数中的值传递到范围变量中。我想这只是因为我对回调函数的工作原理理解不好

代码如下：

function ajaxKimono(callback) {

    $.ajax({
          url:"https://www.kimonolabs.com/api/cveeggn4?apikey=NWYzkeJpFDtb4aOYd6yD96L5PdLuZHjo",
          crossDomain: true,
          dataType: "jsonp",
          success: callback,
          error: function (xhr, status) {
            //handle errors
            console.log(xhr);
            console.log(status);
          }
        });

};

angular.module('app').controller('gifCtrl', function(){
    var self = this;
    var gifs = [];

    ajaxKimono(function(result){
        var collection = result.results.collection1;

        $.each(collection, function(i, item){
            gifs.push({ gif: item.property5.href});
        });

        //this outputs the correct data
        //so i know the ajax call is working correctly
        console.log(gifs);

        self.gifCollection = gifs;

    });

    //something about the scope is messing me up
    //this outputs nothing...
    console.log(self.gifCollection);

});

---

正如评论中提到的，我想问题是在您的请求完成之前调用了

console.log

将http请求放在单独的工厂或服务中。这使得测试和重用更加容易。请注意angular的快捷方式方法的使用，该方法返回：

然后在控制器中：

myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getValues().then(
    function(){
      // successcallback
    },
    function(){
      // errorcallback
    })   
});

---

请注意，我没有实现上述代码，但应该为您提供一个大纲

回调函数的可能副本可以完美地工作。您不明白，ajax请求是异步的。您的console.log（不输出任何内容）将首先执行，然后再执行并处理ajax请求。然后，执行ajax请求并调用回调。只有现在才会执行console.log-in回调。这是正常情况。在AngularJS中，您应该使用

$http

服务进行ajax调用。我添加了一个工厂和控制器。还有一些有趣的结果。在“//successcallback”区域内，我没有从中获得任何信息。但它似乎解决了完全独立的ajax调用。在我的代码笔上查看这个（给它大约5秒的加载时间），仍然在尝试使用sjokkogutten建议的方法完成这项工作。当前它对.then（）类型错误不满意：无法读取undefinedSorry的属性'then'，忘记了返回语句。更新了你的代码，成功了。我的和服服务仍然有问题。需要研究一下jsonp，我读到的所有东西都说和服服务是jsonp而不是原始json。（即使是.ajax请求也有数据类型：“jsonp”），但是当我使用$http.jsonp时，我得到：kimono service.html:1拒绝从“…”执行脚本，因为它的MIME类型（“application/json”）不可执行，并且启用了严格的MIME类型检查。和服服务app.js:55对象{data:undefined，status:404，config:Object，statusText:“error”}我试图用

$http.jsonp

替换

$http.get

，它返回

对象{data:null，status:0，headers:Yc]/
myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getValues().then(
    function(){
      // successcallback
    },
    function(){
      // errorcallback
    })   
});