如何解决axios then块赋值本地变量后外部访问undefined问题？

你遇到的问题本质是异步操作的执行顺序问题。axios发起的HTTP请求是异步任务，JavaScript不会等待请求完成才继续执行后续代码：

1. 你声明了localObject但未赋值
2. 发起axios请求后，代码直接跳到console.log(JSON.stringify(localObject))执行
3. 此时请求还未完成，then块里的赋值逻辑根本没运行，所以localObject还是undefined

下面是两种可行的解决方案：

方案1：使用async/await（推荐，代码更直观） #

把请求逻辑放到async函数中，用await等待请求完成后，再操作localObject：

var axios = require('axios')

async function fetchGoogleMapsData() {
    let localObject;
    var config = {
        method: "get",
        url: httpRequest,
        headers: {} // 注意：axios配置里是headers，不是header
    };

    try {
        const response = await axios(config);
        console.log(JSON.stringify(response.data));
        localObject = response.data;
        // 在这里直接使用localObject
        console.log(JSON.stringify(localObject));
    } catch (error) {
        console.log(error);
    }
}

// 调用函数触发请求
fetchGoogleMapsData();

方案2：将使用localObject的逻辑放到then块内 #

既然then块是请求成功后才会执行的回调，所有依赖localObject的代码都要放在这个回调里（或链式then中）：

var axios = require('axios')

let localObject ;

var config = {
    method: "get",
    url: httpRequest,
    headers: {} // 修正header为headers
};

axios(config)
.then(function(response){
    console.log(JSON.stringify(response.data))
    localObject = response.data;
    // 在这里使用localObject
    console.log(JSON.stringify(localObject));
})
.catch(function(error){
    console.log(error)
})

如果想拆分逻辑，也可以用链式then：

axios(config)
.then(function(response){
    console.log(JSON.stringify(response.data))
    return response.data;
})
.then(function(data){
    localObject = data;
    // 这里写使用localObject的逻辑
    console.log(JSON.stringify(localObject));
})
.catch(function(error){
    console.log(error)
})

内容的提问来源于stack exchange，提问作者asimtot