Question

ħ！我必须从远程文件中获取JSON数据，并将其值读取到我创建的“v”对象实例可访问的变量中。

使用此代码我得到“未定义”

（我试图尽量减少反模式）

var Func = function (url) {

    this.url = url;
};

Func.prototype.fetch = function () {

    // fetching the JSON content
    var res = new XMLHttpRequest();
    res.open('GET', this.url, true);
    res.onreadystatechange = function () {

        if (res.readyState == 4) {
            if (res.status == 200) {

                // this is the object I want access from outside
                var obj = JSON.parse(res.responseText);
                this.ip = obj.ip;
            }
        }
        res.send(null);
    };
};

var v = new Func("http://ip.jsontest.com/?callback=showMyIP");
v.fetch();

//now I get "undefined"
console.log("ip " + v.ip);

我希望我已经清楚了。有人可以帮我这个吗？

提前致谢。

Answer 1

问题是res.open是异步调用。您不会立即获得数据。执行将在console.log("ip " + v.ip);代码执行之前到达onreadystatechange。您可以通过插入console.log或使用断点轻松进行检查。您需要使用回调重写代码：

var Func = function (url) {

    this.url = url;
};

Func.prototype.fetch = function (onready) {

    // fetching the JSON content
    var res = new XMLHttpRequest();
    res.open('GET', this.url, true);
    var that = this;
    res.onreadystatechange = function () {
        if (res.readyState == 4) {
            if (res.status == 200) {

                // this is the object I want access from outside
                var obj = JSON.parse(res.responseText);
                that.ip = obj.ip;
                onready();
            }
        }            
    };
    res.send(null);
};

var v = new Func("http://ip.jsontest.com/");
v.fetch(function () {
    console.log("ip " + v.ip);
});

Answer 2

由于fetch是异步的，因此在调用函数v.ip后，您无法立即获得v.fetch()的值。要查看该值，您必须在回调中使用console.log。

var Func = function (url) {

        this.url = url;
    };

    Func.prototype.fetch = function () {

        // fetching the JSON content
        var res = new XMLHttpRequest();
        res.open('GET', this.url, true);
        res.onreadystatechange = function () {

            if (res.readyState == 4) {
                if (res.status == 200) {

                    // this is the object I want access from outside
                    var obj = JSON.parse(res.responseText);
                    this.ip = obj.ip;
                    console.log(this.ip); // WORKS HERE
                }
            }
            res.send(null);
        };
    };

    var v = new Func("http://ip.jsontest.com/?callback=showMyIP");
    v.fetch();

    //now I get "undefined" because the function is async and is not done putting the value in this.ip.
    console.log("ip " + v.ip);

Javascript ::在闭包中生成新变量并通过对象实例使用它

2 个答案: