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

Question

我有一个具有这种结构的类：

class MyClass{
    json;

    constructor(){

    }
}

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

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

这些例子不起作用：

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