Vue--axios

Posted 邹邹很busy。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue--axios相关的知识,希望对你有一定的参考价值。

前戏

如果你是使用vscode软件进行开发前端项目,进行ajax调试的时候,建议安装liveServer插件。这样我们打开一个文件的时候,会以服务的方式打开。

vue中常用的ajax库有两个,一个是vue-resource,这个是在vue1.x中广泛使用的插件。还有一个是axios,在vue2.x中,官方强烈推荐的第三方ajax请求库。

vue-resource

参考文档:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

在Vue的生命周期中,我们知道created()是最早可以获取到data数据的,所以我们一般都是在created()里写ajax请求

因为vue-resource是第三方库,所以我们需要先进行安装,才能使用

npm install vue-resource

创建一个json文件,假设我的叫name.json

[
    {"name":"张三","age":18},
    {"name":"李四","age":66}
]

有json文件了,我们使用vue-resource请求数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 导入 vue-resource -->
    <script src="./node_modules/vue-resource/dist/vue-resource.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: [] // 声明一个数组,后面用ajax请求的值重新赋值
            },
            // 发送异步请求
            created(){
                this.$http.get("http://127.0.0.1:5500/vue-01-core/name.json").then(response=>{
                    // 回调函数需要使用箭头函数(this Vue实例,不然this代表window)
                    // 获取到的数据存在response.data中
                    console.log(response.data)
                    this.message = response.data
                },response=>{ // 错误时的回调函数
                    console.log(response.statusText)
                })

            }
        })
    </script>
</body>

</html>

这样我们的name.json里的数据就都在h1标签里了

axios

在vue2.x里,官方推荐我们使用axios,参考文档:https://github.com/axios/axios/blob/master/README.md

首先来安装

npm install axios

我们还是使用上面的name.json文件,使用axios发送ajax请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 导入 axios -->
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ res }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                res: [] // 声明一个数组,后面用ajax请求的值重新赋值
            },
            // 发送异步请求
            created(){
                axios.get("http://127.0.0.1:5500/vue-01-core/name.json")
                .then(response=>{
                    // 成功的回调函数
                    // 成功的数据也在response.data里
                    console.log(response.data)
                    this.res = response.data
                })
                .catch(error=>{
                    // 失败时的回调函数
                    // 失败的数据在error.message里
                    console.log(error.message)
                })
                .finally(()=>{
                    // 始终都会执行的回调函数,也可以不写
                    console.log(finally)
                })

            }
        })
    </script>
</body>

</html>

注意:一定要使用箭头函数,如果没有参数时,小括号不能舍去,如果有一个参数时,小括号可以舍去

以上是关于Vue--axios的主要内容,如果未能解决你的问题,请参考以下文章

VUE axios POST 发送跨域 cros 问题

vue+axios完美实现前端路由拦截

vue axios 封装 全局使用

Vue + axios + SpringBoot 2实现导出Excel

vue+axios跨域解决方法

vue+axios拦截器和webapi中读取的实现