vue-axios的使用以及axios请求赋值为空的情况

大厂梦

已于 2022-03-10 23:13:47 修改

阅读量2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-10 23:12:37 首次发布

本文链接：https://blog.csdn.net/qq_35006507/article/details/123413977

版权

注意：如果没有使用脚手架，需要命令导入axios

npm  install axios

注意：如果没有axios 智能代码提示 vscode 引入插件 axios Snippets

<!DOCTYPE html>
<html lang="en">
<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

只能这样哈

大厂梦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-axios的使用以及axios请求赋值为空的情况

1.axios的使用2.axios请求赋值给data 为空的情况
复制链接

扫一扫