Question

我有一个具有以下结构的课程：

class MyClass{
    json;

    constructor(){

    }
}

我想通过构造函数中的API请求将“ json”属性分配为数组。

我尝试了各种方法，甚至直接从其他论坛复制了代码片段。在调试器中，并从console.log()中，我已经确认我实际上正在得到响应，并且在Promise.prototype.then()中，我可以使用结果。但是我无法将其分配给class属性。

这些示例不起作用：

class MyClass{
    json;

    constructor(){
        fetch(url)
            .then(response => response.json())
                .then(json =>  {
                this.json = json;   // I've tried using "self" when not using the "=>" operator
            });
    }
}

class MyClass{
    json;

    constructor(){
        fetch(url)
            .then(response => response.json())
                .then(json =>  {
                this._setJson(json);
            });
    }

    _setJson(json){
        this.json = json;
    }
}

我还尝试将json初始化为数组，并使用this.json.push(json)或将json返回为对象。一直以来，this.json从未得到分配，而我得到ReferenceError: json is not defined↵ at eval (...

我希望分配它，但显然不是。另外，如果这有什么不同，我正在使用Chrome 75。 -谢谢

Answer 1

您的结构看上去略有偏离：

class MyClass{
    constructor() {
        this.json = null;

        //fetch logic here
    }

    _setJson(json){
        this.json = json
    }
}

Answer 2

执行回调时，this指向全局范围，而不是MyClass范围。要解决此问题，请将对象的上下文保存到self这样的变量中：

class MyClass {
    json;

    getJson() {
        return this.json;
    }

    constructor(myCallback) {
        var self = this;
        fetch("https://www.mocky.io/v2/5185415ba171ea3a00704eed").then(function(response) {
            return response.json().then(function(json) {
                alert(this == myClassInstance); // false
                alert(self == myClassInstance); // true
                self.json = JSON.stringify(json);
                myCallback();
            });
        });
    }
}

var myCallBackImpl = () => { document.getElementById("response").innerHTML = myClassInstance.getJson(); }
var myClassInstance = new MyClass(myCallBackImpl);

将Fetch JSON响应分配给构造函数中的属性

2 个答案: