React.JS的超级代理响应范围问题

Question

I'm using react.JS and have an ajax request in the view en lieu of flux.

The response works perfectly, the problem is I can't access the resp body outside of the end function.

here is my code-

    var student= null;
    request
                .get(APIConfig.PATH.TEACHER+"class/"+classid+"/student/"+thing.id)
                .end(function(err,resp){
                    student= resp.body;
                    console.log(student);
                });
    console.log(thing);
    console.log(student); 

the first console log for student shows me the data i need for my view. the second console log for student shows null (from the first variable). this is definitely a scope issue, i was wondering how to get around this to access resp.body outside the function?

Answer 1

It's not a scope issue, it is an async (timing) issue.

The console.log will be executed before the callback of the request, the two main ways to do this will be with either callbacks or promises .

Callback:

var getStudent = function(callback){
    request
        .get(APIConfig.PATH.TEACHER+"class/"+classid+"/student/"+thing.id)
        .end(function(err,resp){
            callback(resp.body);
        });
});

getStudent(function(student){
    console.log(student);
});

Promise:

var getStudent = function(){
    return new Promise(function(resolve, reject){
        request
            .get(APIConfig.PATH.TEACHER+"class/"+classid+"/student/"+thing.id)
            .end(function(err,resp){
                resolve(resp.body);
            });
    });
});

getStudent()
    .then(function(student){
        console.log(student);
    });