ajax 调用返回值但变量为空答案

【问题标题】：ajax call returns value but variable is nullajax 调用返回值但变量为空
【发布时间】：2014-10-29 07:53:58
【问题描述】：

我正在尝试从here 获取天气预报。这工作正常，我得到了我的价值。如果我进行正常的 ajax 调用，它工作正常。

但是：

function Weather() {
    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=',
        value = null;

    function getWeatherForCity(id) {
        $.ajax({
            url: weatherUrl + id,
            async: false,
            success: function (data) {
                console.log(data);
                value = data;
            }
        });
    }

    self.getWeatherForCity = function (id) {
        var cast = value;
        console.log(cast);
        return cast;

    };
}

来电：

        weather = new Weather();

        console.log(weather.getWeatherForCity('2878234'));

如果我通过这些函数进行调试，我会在成功回调函数中得到良好的结果，但是强制转换变量为空，就像它从未被触及过一样？

谁能给我解释一下？

【问题讨论】：

让我们从async: false 是非常糟糕且已被弃用的事实开始。
嗯，我知道，但这不是真正的答案。
问题是你从来没有真正打电话给getWeatherForCity()。因此结果。
getWeatherForCity 是一个私有函数，当你做weather.getWeatherForCity('2878234')时它不会被调用
这怎么可能是私有函数？它在物体上

标签： javascript jquery ajax

【解决方案1】：

问题。您的问题是您从不调用本地 getWeatherForCity 函数。所以它永远不会改变 value 变量。这应该可以解决它：

self.getWeatherForCity = function (id) {
    getWeatherForCity(id);
    return value;
};

更好的方法。看起来您知道使用 async: false 不是理想的解决方案。在这种情况下，我会建议你更好的选择。

function Weather() {

    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=';

    function getWeatherForCity(id) {
        return $.get(weatherUrl + id);
    }

    self.getWeatherForCity = function (id) {
        return getWeatherForCity(id);
    };
}

var weather = new Weather();
weather.getWeatherForCity('2878234').then(function(data) {
    console.log(data);
});

使用异步代码使 UI 在请求期间不会冻结。并且使用 Promise 可以让代码更简洁、更全面。

【讨论】：

谢谢，是的，我知道，但我试了一下！谢谢你的帮助。我会立即删除它
我认为最好删除私有函数本身并执行您在方法中所做的事情。为什么要创建一个不必要的私有函数..
@bipen 也许你是对的。这取决于一些因素。 OP 可能需要一些额外的处理。但如果不是，那么是的，它可以被删除。

【解决方案2】：

你有两个不同的getWeatherForCity() 函数——一个是方法，一个是私有函数（在闭包内）。您永远不会调用私有函数，它实际上可以完成工作。

function Weather() {
    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=',
        value = null;

    function getWeatherForCity(id) {
        $.ajax({
            url: weatherUrl + id,
            async: false,
            success: function (data) {
                console.log(data);
                value = data;
            }
        });
    }

    self.getWeatherForCity = function (id) {
        getWeatherForCity(id); // here
        var cast = value;
        console.log(cast);
        return cast;

    };
}

【讨论】：

【解决方案3】：

您还可以查看 $.when 方法，该方法在继续之前等待 Ajax 调用完成：

http://api.jquery.com/jquery.when/

你会这样使用它：

$.when(getWeatherForCity([pass the parameter here])).done(function(){
    // do stuff here after the method is finished
});

您还需要像这样为您的 Ajax 函数使用 return：

return $.ajax({
        url: weatherUrl + id,
        async: false,
        success: function (data) {
            console.log(data);
            value = data;
        }
    });

【讨论】：