访问回调内的变量

Question

I am in a react app and making a call using axios:

   import axios from 'axios';

    export default {
      getData : function(callback){

        var instance = axios.create({
          baseURL: '//abc/json',
          withCredentials: false
        });

        instance.get('')
            .then((response) => {              
                  callback(response.data.abc);                
              }, (error) => {
                  callback(error)
              });
         }
    }

In another file, I am doing the following:

import file from './file';


//class definition...

    componentDidMount(){

        var obj = {}
        var res = file.getData(function(abc){
            obj['abc'] = abc;
        });

        console.log('obj-abc ', obj.abc); //returns undefined
      }

As shown above, I keep getting undefined. I basically, want the variable to be available globally. I looked at other suggestions regarding callbacks on this site but none of them could help me.

Any help would be appreciated.

Answer 1

Simply put

componentDidMount(){

var obj = {}
var res = file.getData(function(abc){
    obj['abc'] = abc;
    console.log('obj-abc ', obj.abc);
});

Since the getData method is asynchronous, it will not necessarily be executed sequentially in the javascript code. This variable is already global but if you want to make sure you can use it right after it, put some kind of completion condition before continuing code execution.

Answer 2

Just to be clear on JS here. Look at code

setTimeout(met1, 0);
console.log("11");    
setTimeout(met2, 0);
console.log("22");

Out put will be like this

11
22
met1 output
met2 output

So always keep in mind that async code will be executed in future and not in this moment. Will save you a lot of time in debugging. Hope this helps.