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

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

注意：

如果没有使用脚手架

需要命令导入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

只能这样哈~

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。

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

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

如果没有使用脚手架

如果没有axios智能代码提示

.then 如果使用箭头函数

总结

推荐阅读

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

Vue实现视频播放vue-video-player、dplayer方式

Vscode如何创建vue项目

JavaScript使用docx-preview和mammoth预览Docx

vue3如何解决slot深层透传问题

Vue3中getCurrentInstance、页面中route和router的获取实现方式

猜你喜欢

发表评论