Question

我正在为我正在创建的项目创建一个自定义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(); 
}

我还没有对该功能进行参数化，因为我试图了解它的工作原理。

好的，所以继承我的回调尝试按照建议，它仍然无法正常工作。现在我得到一个undefined不是控制台中的一个函数，我按照建议跟踪堆栈帖子。

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;
}

好的我工作但我无法访问数据：

这就是我所说的： updateComputerdata（）; var data = 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，你可以看到在第二个控制台输出对象中数据有一个数组，在我调用之前的第一个数据。数据它是一个嵌套对象。但是，如果我调用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);

enter image description here

好的，所以我稍微改了一下

(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 CODE：

<!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（数据）; 输出未定义

Answer 1

让这条线工作：

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

Answer 2

您未将数据返回Cynergie.get

更改此行：

function sendData(ret_data){ return ret_data; }

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

从自定义JavaScript库返回数据未定义

2 个答案: