Vue简单实例——Axios

最新推荐文章于 2024-04-30 15:46:10 发布

Error_exception_worn

最新推荐文章于 2024-04-30 15:46:10 发布

阅读量575

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/hssjsh/article/details/127930995

版权

简单介绍：

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

这是官网的介绍，巴拉巴拉，可以理解就是一个用来请求服务端发来的数据，和接口数据，还能给服务端发送数据的一个方便好用的插件

安装方法：

建议使用npm安装，命令如下：

npm install axios --save

建议使用npm的方式进行下载和安装

使用方法：

在安装好之后，就可以在需要使用的组件中引入，然后就可以使用了，我们先演示一下从本地获取数据：

<template>
    <div>
        <!-- 将获取到的数据渲染到页面中 -->
        {{this.items}}
    </div>
</template>

<script>
    // 首先导入axios插件
    import axios from 'axios'
    export default{
        name:'test_demo',
        data(){
            return{
                // 这个变量用来存储获取到的数据
                items:[]
            }
        },
        // mounted方法，当页面加载完毕后触发里面的内容
        mounted(){
            // 使用axios的get方法，参数是数据源的路径
            axios.get('/data.json')
            // then方法就是获取参数之后的执行逻辑，方法的参数就是获取到的数据
            // 但是这个数据是经过axios包装之后的数据,除了数据源之外还有很多的其他的信息
            // 我们只需要获取其中的data节点中的数据,就是我们的数据源中的数据
            .then(response => {
                // 将获取到的数据转存到data节点的变量中
                this.items = response.data
                // catch方法是当获取的过程中如果出错了就会执行的方法
            }).catch(response => {
                // 参数是错误信息，我们一般会将错误信息输出在控制台
                console.log(response)
            })
        }
    }
</script>

<style scoped>

</style>

数据源：

我们的数据源是一个json文件，存放在vue的public文件夹下面：

在获取的时候，可以直接写成根目录下的data.json，因为在我们vue打包的时候，根目录由原来的项目路径变成了public，也就是index.html文件所在的文件夹，所以get的参数可以直接写成”/data.json"的形式，然后来看看文件中的数据形式：

然后是网页端的渲染结果：

可以看到，数据已经输出到网页中了；

API：

其中涉及到三个方法：get、then和catch

get方法就是用来表明数据源的地址

then方法就是对获取到的数据做的逻辑处理

catch方法就是当获取信息的时候如果出错了的处理逻辑

其实不写在mounted方法中也可以，可以给dom绑定一个可以触发方法的事件，然后在方法中使用axios请求就可以了

请求接口数据：

上面的案例演示了从本地获取数据，接下来演示从接口中获取数据，其实结构是完全一样的，只是将get的参数从原来的本地路径改成了接口路径：

代码实现：

<template>
    <div>
        <!-- 将获取到的数据渲染到页面中 -->
        {{this.items}}
    </div>
</template>

<script>
    // 首先导入axios插件
    import axios from 'axios'
    export default{
        name:'test_demo',
        data(){
            return{
                // 这个变量用来存储获取到的数据
                items:[]
            }
        },
        // mounted方法，当页面加载完毕后触发里面的内容
        mounted(){
            // 在获取接口数据的时候，是将get的参数改成接口中的数据即可
            // 这里我们用一个免费的接口来进行测试：http://jsonplaceholder.typicode.com/
            axios.get('http://jsonplaceholder.typicode.com/users')
            // then方法就是获取参数之后的执行逻辑，方法的参数就是获取到的数据
            // 但是这个数据是经过axios包装之后的数据,除了数据源之外还有很多的其他的信息
            // 我们只需要获取其中的data节点中的数据,就是我们的数据源中的数据
            .then(response => {
                // 将获取到的数据转存到data节点的变量中
                this.items = response.data
                // catch方法是当获取的过程中如果出错了就会执行的方法
            }).catch(response => {
                // 参数是错误信息，我们一般会将错误信息输出在控制台
                console.log(response)
            })
        }
    }
</script>

<style scoped>

</style>

接口数据：

显示效果：

接口地址：jsonplaceholder.typicode.com/posts

这是一个免费的假的API接口，提供了一些虚拟的数据用来测试，就是有时候连接不是很稳定

GET请求方式：

get的请求方式，就是用来获取数据的请求方式，我们之前在案例中使用的都是get请求方式，我们用get请求方式从接口中获取数据并美化一下输出的形式：

显示效果：

代码实现：

<template>
    <div>
        <!-- 将获取的数据美化一下 -->
        <!-- 因为获取的是一个json文件数据，所以可以用“.”获取到具体的属性 -->
        <ul v-for="item in items" :ket="item.id">
            <li>{{item.body}}</li>
        </ul>
    </div>
</template>

<script>
    // 首先导入axios插件
    import axios from 'axios'
    export default{
        name:'test_demo',
        data(){
            return{
                // 这个变量用来存储获取到的数据
                items:[]
            }
        },
        // mounted方法，当页面加载完毕后触发里面的内容
        mounted(){
            // 在获取接口数据的时候，是将get的参数改成接口中的数据即可
            // 这里我们用一个免费的接口来进行测试：http://jsonplaceholder.typicode.com/comments
            axios.get('http://jsonplaceholder.typicode.com/comments')
            // then方法就是获取参数之后的执行逻辑，方法的参数就是获取到的数据
            // 但是这个数据是经过axios包装之后的数据,除了数据源之外还有很多的其他的信息
            // 我们只需要获取其中的data节点中的数据,就是我们的数据源中的数据
            .then(response => {
                // 将获取到的数据转存到data节点的变量中
                this.items = response.data
                // catch方法是当获取的过程中如果出错了就会执行的方法
            }).catch(response => {
                // 参数是错误信息，我们一般会将错误信息输出在控制台
                console.log(response)
            })
        }
    }
</script>

<style scoped>
    li{
        border-bottom: 1px black dotted;
        font-size: 20px;
        color: green;
    }
</style>

数据源：http://jsonplaceholder.typicode.com/comments

因为请求的数据源是一个json文件，所以可以用“."的形式获取里面的具体数据，就是可以当作一个对象数据来使用

POST请求方式：

post请求方式是将数据传递到服务器端使用的，是一种提交方式：

代码实现：

<template>
    <div>
        <!-- 设置需要传递的数据 -->
        姓名：<input type="text" v-model="name" name="name"/><br>
        <br>
        内容：<textarea name="title" id="" cols="30" rows="10"  v-model="title"></textarea>
        <br>
        <br>
        <!-- 绑定一个点击事件 -->
        <!-- prevent属性表示触发的是一个自定义事件而不是原生的dom事件 -->
        <button @click.prevent="post">提交</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default{
        name:'axios_post',
        data(){
            return{
                name:'',
                title:''
            }
        },
        methods:{
            post(){
                // 将get方法改成post方法就可以完成post请求
                axios.post('http://jsonplaceholder.typicode.com/comments/',{
                    name:this.name,
                    title:this.title
                    // then方法表示请求成功之后进行的逻辑操作，这里输出一下传递的数据
                }).then(response => {
                    console.log(response)
                })
            }
        }
    }
</script>

<style scoped>

</style>