Vue中使用Axios调用API时报错：TypeError: Cannot read property 'get' of undefined

这个报错的原因很明确：你在组件里用this.axios尝试调用get方法，但当前Vue实例的this上根本没有axios这个属性——你把axios挂载到了window对象上，却没让组件实例能通过this访问到它。下面给你几种可行的解决方案，按推荐程度排序：

方案一：组件内直接导入axios（推荐，按需引入） #

这是最规范的组件级用法，只在需要的组件里引入axios，避免全局污染：

<template> 
<div class="home"> 
<h1>{{ msg }}</h1> 
<p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p> 
</div> 
</template> 
<script> 
// 去掉window.axios的赋值，改用import导入
import axios from "axios"; 

export default { 
name: 'Home', 
props: { 
msg: String 
}, 
components: { },  // 这里你写错了，是components复数形式！
mounted: function () { 
alert('Hi '); 
// 直接用导入的axios变量，无需this
axios.get('https://api.github.com/users') 
.then(value => { 
// 注意：直接alert对象会显示[object Object]，建议转成字符串查看内容
alert(JSON.stringify(value.data)); 
}); 
} 
}; 
</script> 
<style scoped> 
</style>

另外补充：你代码里的component: { }应该是components: { }（复数形式），虽然这不是当前报错的原因，但也是一个需要修正的小细节。

方案二：全局挂载axios到Vue原型（适合项目多处使用axios） #

如果你的项目很多组件都需要用到axios，可以在入口文件（比如main.js）里把axios挂载到Vue的原型上，这样所有组件都能通过this访问：

// main.js中的代码
import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'

// 挂载到原型，用$前缀避免和组件内部属性冲突
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App)
}).$mount('#app')

之后在组件里就可以这样调用：

mounted: function () {
  alert('Hi ');
  this.$axios.get('https://api.github.com/users')
  .then(value => {
    alert(JSON.stringify(value.data));
  });
}

方案三：直接使用window.axios（最简单但不推荐） #

既然你已经把axios赋值给了window.axios，也可以直接在组件里用这个全局变量，不过这种方式会污染全局作用域，不建议在大型项目里使用：

mounted: function () {
  alert('Hi ');
  window.axios.get('https://api.github.com/users')
  .then(value => {
    alert(JSON.stringify(value.data));
  });
}

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