在回调中访问变量答案

【问题标题】：Accessing a variable inside a callback在回调中访问变量
【发布时间】：2016-12-15 12:07:26
【问题描述】：

我在一个 react 应用程序中并使用 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)
              });
         }
    }

在另一个文件中，我正在执行以下操作：

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
      }

如上所示，我一直不确定。我基本上希望该变量在全球范围内可用。我查看了有关此站点上的回调的其他建议，但没有一个可以帮助我。

任何帮助将不胜感激。

【问题讨论】：

GetData 方法是异步的，而 javascript 不是。您的 file.getData 将在稍后打印控制台时返回结果。只需添加 console.log('obj-abc ', obj.abc);在 file.getData 中，您会看到一切正常。
如果您正在打印 console.log('obj-abc ', obj.abc); 那么它完全可以正常工作，但在您的情况下，它打印 obj 的值.abc 值不可用，因为 getData() 是异步方法，而 componentDidMount() 方法不等待完整的 getData() 方法。

标签： javascript reactjs axios

【解决方案1】：

简单地说

componentDidMount(){

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

由于getData方法是异步的，在javascript代码中不一定会顺序执行。该变量已经是全局变量，但如果您想确保可以在它之后立即使用它，请在继续执行代码之前添加某种完成条件。

【讨论】：

您建议使用哪种类型的完成条件？我希望该值在全球范围内可用。
类似在console.log之后，你可以把var isGetDataDone = True;在另一个你想在这个函数之后执行的函数中，只需输入 if (isGetDataDone){ }

【解决方案2】：

这里要明确 JS。看代码

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

输出会是这样的

11
22
met1 output
met2 output

因此请始终牢记，异步代码将在未来而不是此时执行。将为您节省大量调试时间。希望这会有所帮助。

【讨论】：

这不是 OP 所要求的。考虑对问题发表评论，而不是将其作为答案发布
我在评论中给他答案。这只是为了让他明白为什么会出现这个问题。