vue-axios的使用以及axios请求赋值为空的问题

时间：2025-07-25 09:59:16|栏目：JavaScript|点击：次

vue-axios的使用及axios请求赋值为空问题

注意：

如果没有使用脚手架

需要命令导入axios

1	`npm install axios`

注意：

如果没有axios智能代码提示

vscode 引入插件 axios Snippets

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="userList">
        <ul>
            <li v-for="(item, index) in users" >
                编号：{{item.id}} 姓名:{{item.name}} 号码：{{item.number}}
            </li>
        </ul>


    </div>
    
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    new Vue({
        el:'#userList',
        data: {
            users:[]
        },
        //mounted 钩子函数，可在vue初始化之前加载
        mounted() {
            this.getUserList();
        },
        methods: {
            getUserList(){
                //axios 请求
                axios.get('http://127.0.0.1:8081/userList', {
                // params:{
                //     ID:123451
                // }
            })
            //为什么请求要在这里处理呢？翻看我前面的文章ES6新特
            .then(res => {
                console.log(res.data)
                this.users=res.data

            })
            .catch(err => {
                console.error(err); 
            })

            }
           
        },
    })
</script>

</html>

.then 如果使用箭头函数

我们可以通过this.users 把获取到的值赋予进去，否则只能如下：

let vm = new vue({})
vm.users = res.data

只能这样哈~

上一篇：Vue实现视频播放vue-video-player、dplayer方式

栏目：JavaScript

下一篇：UniApp与WebView双向通信及数据传输超详细讲解

本文标题：vue-axios的使用以及axios请求赋值为空的问题

本文地址：https://zz.feitang.co/wangluobiancheng/23780.html

更多JavaScript

JavaScript

vue-axios的使用以及axios请求赋值为空的问题

vue-axios的使用及axios请求赋值为空问题

如果没有使用脚手架

如果没有axios智能代码提示

.then 如果使用箭头函数

您可能感兴趣的文章

阅读排行

推荐教程