ajax调用后无法更新类变量答案

【问题标题】：Unable to update class variable after ajax callajax调用后无法更新类变量
【发布时间】：2019-10-21 22:46:56
【问题描述】：

在完成 ajax 请求后获得两个整数后，this.N 和 this.M 不会被 storeDims() 设置，即使 dims 已正确解码。所以似乎我无法访问构造函数中声明的this.N 和this.M。这是代码

class MapModel {

    constructor() {
        this.N; // need to initialize this after an ajax call
        this.M;
        this.seats = new Array();
        this.remote_seats = new Array();
    }

    init(callback) {
        let _this = this;
        $.when(
            _this.getDims(),
            _this.getSeats(),
        ).then(this.initMap(callback))
    }


    initMap(callback) {
        console.log(this.N); // prints undefined
        console.log(this.M); // this as well
        callback(this.N, this.M, this.seats);
    }

    getDims() {
        let _this = this;
        $.ajax({
            url: 'src/php/data.php',
            type: 'POST',
            data: {action: 'getDims'},
            success: function (result) {
                let dims = JSON.parse(result); // dims[0] = 10, dims[1] = 6
                _this.storeDims(dims);
            }
        });
    }

    storeDims(dims) {
        console.log(dims);
        this.N = parseInt(dims[0]);
        this.M = parseInt(dims[1]);
        console.log(this.N);
        console.log(this.M);
    }

    getSeats() {
    let _this = this;
    $.ajax({
        url: 'src/php/data.php',
        type: 'POST',
        data: {action: 'getSeats'},
        success: function (result) {
            let seats = JSON.parse(result);
            _this.storeSeats(seats);
        }
    });
}

storeSeats(seats) {
    this.remote_seats = seats;
    console.log(this.remote_seats);
}
}

【问题讨论】：

您的控制台中是否有日志console.log(dims);？
@madalinivascu 是的：(2) […] 0: 10 1: 6 length: 2 <prototype>: Array []
在下面查看我的答案

标签： javascript jquery ajax class

【解决方案1】：

您需要从 getDms 和 getSeats 函数返回 ajax 承诺

 getDims() {
        let _this = this;
        return $.ajax({
            url: 'src/php/data.php',
            type: 'POST',
            data: {action: 'getDims'},
            success: function (result) {
                let dims = JSON.parse(result); // dims[0] = 10, dims[1] = 6
                _this.storeDims(dims);
            }
        });
    }

您甚至可以将值直接传递给 initMap

init(callback) {
        let _this = this;
        $.when(
          _this.getDims(),
          _this.getSeats()
        ).then(function(dims,seats) {_this.initMap(dims,seats,callback)})
    }


    initMap(dimsRaw,seatsRaw, callback) {
        let dims = JSON.parse(dimsRaw);
        console.log(dims[0]); 
        console.log(dims[1]); 
        callback(dims[0], dims[1], this.seats);
    }

【讨论】：

我已经更新了上面的代码，现在我需要获取两个数组，然后调用initMap 函数
更新了我的答案，then 回调的第二个参数是席位，更多信息见api.jquery.com/jquery.when
为什么storeDims 和storeSeats 不会更新构造函数中声明的this. 变量？我期待 initMap 在 ajax 调用初始化它们之后使用这些变量。

【解决方案2】：

init 承诺回调在链声明上被调用，尝试添加一个函数包装器：

    init(callback) {
        let _this = this;
        $.when(
            _this.getDims(),
        ).then(function() {_this.initMap(callback)})
    }

【讨论】：