在Vue中使用axios基础方式

发布时间：2024年01月20日

简单的为大家介绍一下如何在vue中使用axios
我们需要先了解json-server，我们要搭建服务
可以先看一下本人的这篇：json-server的基础使用

基础使用

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="root">
        <button @click="search">点击发送GET请求</button>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script src="../JS/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        methods: {
            search() {
                // 第一种方式
                // axios({
                // 请求方式
                //     method: "GET",
                // 请求的url
                //     url: "http://localhost:3000/posts"
                // }).then(res => {
                //     console.log(res);
                // })

                // 第二种方式 常用
                // 比较方便 第一个直接写url
                axios.get("http://localhost:3000/posts").then(res => {
                    console.log(res);
                })
            }
        },
    })
</script>

</html>

在这里插入图片描述

渲染页面的方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="root">
        <button @click="search">点击发送GET请求</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.id}}--{{item.title}}--{{item.author}}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script src="../JS/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            list: []
        },
        methods: {
            search() {
                // 第一种方式
                // axios({
                // 请求方式
                //     method: "GET",
                // 请求的url
                //     url: "http://localhost:3000/posts"
                // }).then(res => {
                //     console.log(res);
                // })

                // 第二种方式 常用
                // 比较方便 第一个直接写url
                axios.get("http://localhost:3000/posts").then(res => {
                    // console.log(res);
                    this.list = res.data
                })
            }
        },
    })
</script>

</html>

点击GET按钮后
在这里插入图片描述

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

文章来源:https://blog.csdn.net/m0_74577714/article/details/135702631
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章