使用Vue.js+axios调用GitHub API获取数据失败，请求排查

这里列出你代码里的核心问题，以及对应的修复方式：

• 未引入Axios的运行依赖
  你在代码里用了import axios from 'axios'，但原生HTML环境不支持这种ES模块导入方式，必须通过CDN引入Axios的脚本文件，否则浏览器会报axios is not defined的错误。

• 存在语法错误：多余的闭合括号
  在Vue实例创建代码的最后，你多写了一个})，这会直接导致JS解析失败，整个Vue代码都无法执行。

• 响应数据处理错误
  Axios的get请求返回的response是完整的响应对象，包含响应头、状态码等信息，真正的用户列表数据存在response.data中。另外你要显示的是GitHub用户总数，应该取这个列表的长度response.data.length，而非直接赋值整个响应对象。

• 模板显示逻辑错误
  如果直接在模板中输出{{ info }}，当info是对象时会显示[object Object]，无法展示有效内容，需要对应到具体的数值（比如用户总数）。

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 新增Axios的CDN引入 -->
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 显示用户总数 -->
            <p>Total number of GitHub users: {{ userCount }}</p>
            <!-- 可选：展示用户列表示例 -->
            <ul>
                <li v-for="user in userList" :key="user.id">{{ user.login }}</li>
            </ul>
        </div>
        <script>
            var app = new Vue({ 
                el: '#app',
                data () {
                    return {
                        userList: [],
                        userCount: 0
                    }
                },
                mounted () {
                    axios.get('https://api.github.com/users')
                        .then(response => {
                            this.userList = response.data;
                            this.userCount = response.data.length;
                        })
                        // 新增错误捕获，方便排查问题
                        .catch(error => {
                            console.error('数据获取失败:', error);
                        })
                }
            })
        </script>
    </body>
</html>

额外提示 #

建议打开浏览器的开发者工具（F12）查看控制台，里面会显示具体的语法错误或请求错误信息，这是排查前端问题的关键手段。

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