AJAX and WeakMaps requests

Question

AJAX and WeakMaps requests

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

While I was putting into practice what I have learned so far about the ES2015 with Babel. specifically on WeakMaps, I came up with a problem that I do not know why it happens and I do not know how to solve it.

I have a WeakMap set to store information coming from an AJAX Request which is only triggered if that WeakMap has nothing stored.

I came to this:

class User {

    constructor( id ) {

        id = Number( id );

        if( id <= 0 || isNaN( id ) ) {
            throw new TypeError( 'Invalid User ID' );
        }

        _id.set( this, id );
    }

    getID() {
        return _id.get( this );
    }

    getData() {

        let _this = this;

        if( _data.get( _this ) === undefined ) {

            _this.loadData().done( function( data ) {

                // JSON is indeed successfully loaded

                console.log( data );

                _data.set( _this, data );

                // WeakMap is indeed set correctly

                console.log( _data.get( _this ) );
            });
        }

        // But here it's undefined again!

        console.log( _data.get( _this ) );

        return _data.get( _this );
    }

    loadData() {

        return $.get({
            url: '/users/' + _id.get( this, data ),
        });
    }
}

let _id   = new WeakMap;
let _data = new WeakMap;

// ---------------

var user = new User( 1 );

console.log( user.getID(), user.getData() ); // 1 undefined

As far as I know, WeakMap has been defined correctly, so much so that it is done with the user ID and can be obtained normally, thus ruling out possible problems with transcompiler .

But information that AJAX comes with, even though it is coming correctly inside jquery.done () can not be accessed outside of it.

The only way I could make it work was by setting async: false to $.ajax , which I know is not right.

What am I doing wrong? Without knowing why I can not even research on the subject and try for myself.

javascript jquery ajax ecmascript-5

asked by anonymous 26.01.2017 / 11:36

2 answers

Entity Framework: Data Model with column with the largest possible number of characters Sql server transform a column into several rows

score 1 · Answer 1

The question here is basically the same as this , or this . That is: ajax is asynchronous. This means that:

// pseudo código:
var x = 10;
ajax(function(){
    x = 20;
});
console.log(x); // dá 10

What happens is that ajax takes time to execute and, even though it is very fast) the code will continue to run until% a_count before ajax is completed.

The solution to this is to call console.log when console.log has something to return. This can be done with callback , or with Promises .

The solution is, how did you find , make ajax return an deferred object, type Promise:

user.getData().done(function(data){
    console.log( data );
})

score 0 · Answer 2

I do not understand JavaScript to the point of saying that this is the correct solution but I searched a lot and read countless answers both in the Overflow en stack and the Internet out, which in an attempt to teach the people to fish, ended up killing them with hunger with almost endless answers, complex or simply hiding the solution in the midst of so much information or so necessary.

Who's of interest:

class User {

    constructor( id ) {

        id = Number( id );

        if( id <= 0 || isNaN( id ) ) {
            throw new TypeError( 'Invalid User ID' );
        }

        _id.set( this, id );
    }

    getID() {
        return _id.get( this );
    }

    getData() {

        if( _data.get( this ) === undefined ) {
            _data.set( this, this.loadData() );
        }

        return _data.get( this );
    }

    loadData() {
        return $.getJSON( CARD_LIST + '/player/' + _id.get( this ) );
    }
}

let _data = new WeakMap;

// ---------------

var user = new User( 1 );

user.getData().done( function( data ) {

    console.log( data );
})

It's not what I had in mind initially, since I'll have to use jQuery.done () each time I use a simple getter (which in my opinion should bring the information ready for use) could not explain the "comos" or the "why".

It would be nice to know, of course, and if anyone wants / can answer it in a didactic way it would be incredible, but for now I humbly hope it helps someone else who is trying to extract simple information from unfriendly answers / comments to those who do not understand well of the subject as I do.