vue（6）—— vue中向后端异步请求

时间 2019-11-09

标签 vue 向后异步请求繁體版

原文原文链接

异步请求

其实什么是异步请求已经不用多说了，通俗的说，就是整个页面不会刷新，须要更新的部分数据作局部刷新，其余数据不变。javascript

学到这里，你应该用过jquery里的ajax了，因此很能理解了，很少说了。详细的就本身百度了css

在vue中，能够作异步请求的有vue-resource和axioshtml

后端项目准备：

我用的Python做为后端语言，用的Python的django框架做为后端的web服务，且用的是django-rest-framework作成了先后端分离的项目，本文着重点不在Python后端这方面，感兴趣的能够看个人Python相关文章，这里就不涉及Python的讲解，我直接把项目代码放在这，能够直接用个人服务端项目，前提你得装了相关的开发环境（Python+django+djangorestframework）前端

项目文件：点我 vue

API接口：

API接口

支持请求方式

请求参数

http://127.0.0.1/data/

get,post

get:空java

post:{'name':XX,'age':xx,'pwd':xx,'brief':xxx}node

http://127.0.0.1/retrieve/:idjquery

（id为整形）ios

put,delete

put:{'name':XX,'age':xx,'pwd':xx,'brief':xxx}web

delete: 空

数据库字段数据：

好，接下来就开始作异步请求了

vue-resource

vue-resource是vue官方团队的人开发的，在vue2.0出来以后，开发vue-resource的人表示再也不更新，放弃维护，并推荐使用axios，具体缘由不深究，总之使用的比较多的仍是axios，axios下面会介绍，这里仍是稍微用下vue-resource怎么用的

安装

一样的，用npm包安装：

引入包：

引入安装的本地包：

引入cdn包：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

使用-get请求

这里就只展现一个get请求了，在axios再展现其余的请求方式，实际开发中估计已经用的很少，了解下就好了，我感受和axios的语法差不了多少。

好的，做为服务端的代码就是上面的django项目，若是没有Python的django环境的，也能够本身配置一个后端，反正能正常返回数据就行

正常返回了对吧

其实vue-resource的get请求也能够传入参数的，而后这些都不深究了，仍是那句，做为了解便可，由于你会发现axios很相似

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-resource/dist/vue-resource.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    this.$http.get('http://127.0.0.1:8000/data/',)
                    .then(function (data) { //正确的回调
                        this.msg = data
                        console.log(data.data);
                    }, function (data) {   // 错误的回调
                        console.log(data)
                    });

                }
            },

        })
    </script>
</body>

</html>

vue-resource

axios

axios如今很是流行，开玩笑，vue官方都推荐它，用的人确定多啊，很少说了，详细本身看官网文档吧，这里有个中文版的官网：传送门

安装

导包

导入本地包：

导入cdn包：

<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

使用

这里用的后端服务仍是上面给的那个django项目

get请求

能够返回结果。

axios的function函数this对象

可是发如今html结构上并无把数据渲染出来，按理说，明明已经拿到数据，可是并无正常渲染给p标签，这个是个大众都容易犯的错，不少人都卡在这里，都纳闷啊，在进入axios的先后，打印this对象看看：

发现问题了，进入axios以后，this对象改变了，变成了根对象了，这个怎么办呢

1.大众都能想到的办法，用一个临时变量接收：

能够用，不过不太推荐这个方法

2.利用箭头函数，永远绑定this对象：

这样就完事了，咱们也不须要去本身定义一个临时变量存储，很方便的

至于什么是箭头函数，这里很少说，在前端基础部份内容里会说，大概就说下，箭头函数的格式：

() =>{

}

若是没有参数的话，括号能够省略

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    console.log(this) // 以前
                    axios.get('http://127.0.0.1:8000/data/')
                    .then((data)=>{ // 正确的回调
                        console.log(this) // 以后
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 错误的回调
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>

axios-get

get请求也能够传入参数的

此时这里就不展现了，自行研究了

post请求

这里要注意一下，若是是非get方式的传参，按文档：

须要用URLsearchParams对象把参数做url编码

注：

URLsearchParams.append()方法接收两个参数，一个是键，一个是值，一次只能传一对键值，因此这里有点繁琐

不过我以为应该有一次性传入多个参数的方法，这里不去深究了，这是只是展现案例，感兴趣自行研究

最后结果，确实添加进来了：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    params.append('age',60)
                    params.append('brief','我什么简介要你管')
                    params.append('name','老王')
                    params.append('pwd','123')
                    console.log(params)
                    axios.post('http://127.0.0.1:8000/data/',params)                    
                    .then((data)=>{ // 正确的回调
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 错误的回调
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>

axios-post

put请求

其实axios的post同样能够完成put、delete等的请求，官方说的是为了方便起见，取了别名：

好的，话很少说，直接干

我要修改老王的密码：

修改以前，老王的密码是123：

修改以后，老王的密码成了pwd1929...，正好就是咱们刚才改的那个密码

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    params.append('age',60)
                    params.append('brief','我什么简介要你管')
                    params.append('name','老王')
                    params.append('pwd','pwd192924')
                    console.log(params)
                    axios.put('http://127.0.0.1:8000/retrieve/6',params)                    
                    .then((data)=>{ // 正确的回调
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 错误的回调
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>

axios-put

delete请求

这个就简单了，直接上代码，在以前，数据库的数据以下，我要删除id为7的那个数据：

开干：

删除以后的数据库，确实没有了：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    axios.delete('http://127.0.0.1:8000/retrieve/7')                    
                    .then((data)=>{ // 正确的回调
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 错误的回调
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>

axios-delete

axios其余相关配置：

axios能够直接挂载在vue实例的属性上：

Vue.prototype.$axios = axios   // 注意是prototype，不是property
this.$axios.get(....)

正常访问：

能够配置默认url

在之后大型项目中，若是请求屡次，那么是否是你这代码每次都要写url，并且若是url改变的话，每一个异步请求的部分都要改，这样不利于维护，因此能够配置个默认的url前缀：

axios.defaults.baseURL = 'http://127.0.0.1:8000'  // 注意是defaults和baseURL
axios.get('/xxx/')

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >点我</button>
        
    </div>
    <script>
        Vue.prototype.$axios = axios;
        axios.defaults.baseURL = 'http://127.0.0.1:8000'
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    this.$axios.get('/data/')                    
                    .then((data)=>{ // 正确的回调
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 错误的回调
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>

axios-baseURL-挂载到vue实例属性上

总结：

很是简单，仍是那句，多看官方文档