JS文件中的变量未声明

Question

我正在经历一些以前从未经历过的JS怪异行为。我正在尝试进行API调用以获取用户个人资料，但是，该变量似乎未定义。这是我的API调用

axios.get('http://127.0.0.1:8000/api/v1/profile/',{
  headers: {
    Authorization: `Token ${token}`
  }
}).then(response => {
  var userProfile = response.data
  console.log(userProfile)
})

上面的所有内容通常都能正常工作，但是，当我尝试访问变量userProfile时，Chrome控制台会说它是未定义的。例如，以下代码给出了未定义的错误：

axios.get('http://127.0.0.1:8000/api/v1/profile/',{
  headers: {
    Authorization: `Token ${token}`
  }
}).then(response => {
  var userProfile = response.data
})
console.log(userProfile)

我认为用var声明一个变量可以在函数调用之外访问它，我甚至最初定义了userProfile = null，然后尝试更改它，但是值似乎没有变化。任何帮助将不胜感激。