从未定义的自定义 javascript 库返回数据答案

【问题标题】：Returning data from custom javascript library undefined从未定义的自定义 javascript 库返回数据
【发布时间】：2015-06-08 01:56:23
【问题描述】：

我正在为正在创建的项目创建自定义 javascript 库，但在将数据从库传递到网页时遇到问题。基本上我正在创建自己的 http 请求库。当我尝试将 var 设置为库调用的返回值时，如下所示：

var data = Cynergi.get();
console.log(data); shows undefined.

这是我的库代码。

(function(window){
    function defineCynergi(){
            var Cynergi = {};
            Cynergi.alert = function (){
                alert("this is a cynergi test");
            }

            Cynergi.get = function(){
                    var data = getData();
            }
            return Cynergi;
        }
    if(typeof(Cynergi) === 'undefined'){
        window.Cynergi = defineCynergi();
    }
})(window);

function getData(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI('http://thewaywardjourney.com:3000/computer_stats?order=time.asc'));
    xhr.onload = function() {
        if (xhr.status === 200) {
            //alert('User\'s name is ' + xhr.responseText);
            var data = JSON.parse(xhr.responseText);
            console.log(data);
        }
        else {
            //alert('Request failed.  Returned status of ' + xhr.status);
            //data = JSON.parse(xhr.responseText);  
        }
    return data;
    };
    xhr.send(); 
}

我还没有参数化这个函数，因为我想先了解它是如何工作的。

好的，我根据建议尝试回调，但它仍然不起作用。现在我得到一个未定义的不是控制台中的函数，并且我按照建议关注堆栈帖子。

function getData(args, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI('http://thewaywardjourney.com:3000/computer_stats?order=time.asc'));
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(xhr.responseText);
        }
        else {
        }
    };
    xhr.send(); 
    return;
}

好的，我得到了它的工作，但我无法访问数据：

这就是我所说的：更新计算机数据（）； var 数据 = Cynergi.get(); console.log(data.data)

Object {data: null, setData: function}
data: Array[62]
setData: function (data){ this.data = data;}
__proto__: Object


(function(window){
    function defineCynergi(){
            var Cynergi = {};
            Cynergi.alert = function (){
                alert("this is a cynergi test");
            }
            Cynergi.get = function(){
                     var ret_data = {
                         data: null,
                         setData: function(data){ this.data = data;}
                     }
                    getData(ret_data);
                    return ret_data;
            }
            return Cynergi;
        }
    if(typeof(Cynergi) === 'undefined'){
        window.Cynergi = defineCynergi();
    }
})(window);

function getData(ret_data){
     var the_data = {
         data: null,
         setData: function(data){ this.data = data;}
     }
    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI('http://thewaywardjourney.com:3000/computer_stats?order=time.asc'));
    xhr.onload = function() {
        if (xhr.status === 200) {
            the_data.setData(JSON.parse(xhr.responseText));
        }
        else {
            the_data.setData(JSON.parse(xhr.responseText));
        }
    };
    xhr.send(); 
    ret_data.setData(the_data);
    return the_data;
}

如果您看到此图像，第一个是 ret_data，然后该控制台输出中的第二个对象是 ret_data.data，您可以在第二个控制台输出对象中看到 data 有一个数组，而在我调用之前的第一个对象中。 data 它是一个嵌套对象。但是，如果我调用 ret_data.data.data 因为那是嵌套对象的数据值，但它返回 null 并且我不确定为什么或如何修复它。

updated code 

(function(window){

    function defineCynergi(){

            var Cynergi = {};

            Cynergi.get = function(){

                     var ret_data = {

                         data_returned: null,

                         setData: function(data_returned){ this.data_returned = data_returned;}

                     }

                    getData(ret_data);

                    console.log(ret_data);

                    return ret_data;

            }

            return Cynergi;

        }

    if(typeof(Cynergi) === 'undefined'){

        window.Cynergi = defineCynergi();

    }

})(window);



function getData(ret_data){



     var the_data = {

         data: null,

         setData: function(data){ this.data = data;}

     }

    var xhr = new XMLHttpRequest();

    xhr.open('GET', encodeURI('http://thewaywardjourney.com:3000/computer_stats?order=time.asc'));

    xhr.onload = function() {

        if (xhr.status === 200) {

            the_data.setData(JSON.parse(xhr.responseText));

        }

        else {

            the_data.setData(JSON.parse(xhr.responseText));

        }

    };

    xhr.send(); 

    ret_data.setData(the_data);

    return the_data;



}



            //alert('User\'s name is ' + xhr.responseText);

            //var data = JSON.parse(xhr.responseText);

            //alert('Request failed.  Returned status of ' + xhr.status);

            //data = JSON.parse(xhr.responseText);  

            //console.log(data);

好吧，我稍微改了一下

(function(window){
    function defineCynergi(){
            var Cynergi = {};
            var returned_data;
            Cynergi.get = function(){
                getData('http://127.0.0.1:3000/computer_stats?order=time.asc', sendData);
            }
            return Cynergi;
        }
    if(typeof(Cynergi) === 'undefined'){
        window.Cynergi = defineCynergi();
    }
})(window);

function getData(url, callback){

    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI(url));
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        }
        else {
            callback(JSON.parse(xhr.responseText));
        }
    };
    xhr.send(); 
}

function sendData(ret_data){
    returned_data = ret_data;
    console.log(ret_data); // this works but it doesnt send the data back.
}

HTML 代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>TheWayWardJourney</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="cynergi.js"></script>
        <script>
            var data = Cynergi.get();
            console.log(data);

            //$.each( data, function( i, item ) {
            //  console.log(item);
            //});
            //console.log(data.data_returned);
        </script>
        <style>
                    #messages_modal{
                            position:fixed;
                            top: 30%;
                            left: 50%;
                            width:60%;
                            height:500px;
                            margin-top: -9em; /*set to a negative number 1/2 of your height*/
                            margin-left: -15em; /*set to a negative number 1/2 of your width*/
                            border-radius:15px;


                    }
                    #circular {
                        width: 40px;
                        height: 40px;
                        border-radius: 150px;
                        -webkit-border-radius: 150px;
                        -moz-border-radius: 150px;
                        background: url(images/avatar.jpg) no-repeat;
                    }
        </style>
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <body>
                                <p style='text-align:left;align:left;' id='computer_info'></p></p>
                                <p style='text-align:left;align:left;' id='computer_stats'></p></p>

    </body>
</html>

console.log(数据); 输出未定义

【问题讨论】：

你需要为你的函数使用回调/承诺
@MultiplyByZer0 一个例子？
How can I return a value from an AJAX request? 的可能重复项
这是本网站上大约 1000 个其他问题的欺骗 - 从 ajax/异步请求返回数据。
@Adam 那里我添加了我尝试从您发布的链接回电，有什么问题？

标签： html javascript

【解决方案1】：

使这条线工作：

Cynergi.get(function (data) { console.log(data); });

【讨论】：

嘿伙计，我根据您发送的教程进行了更新，但仍然没有看到上面发布的更新代码:)

【解决方案2】：

您没有将数据返回给Cynergie.get

改变这一行：

function sendData(ret_data){ return ret_data; }

或者只需将 return 添加到您的 getData 函数中，只要您不需要接受备用回调，就取消回调。

【讨论】：