vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现
axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护
本文为大家介绍vue使用axios发送AJAX请求
首页安装并引入axios
1、npm install axios -S #直接下载axios组件,下载完毕后axios.js就存放在node_modules/axios/dist中
2、网上直接下载axios.min.js文件
3、通过script src的方式进行文件的引入<script src="js/axios.min.js"></script>
axios基本使用方法
发送get请求
1、基本使用格式
格式1:axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典
格式2:axios.get(url[,options]);
2、传参方式:
通过url传参
通过params选项传参
下面我们来看一个vue发送ajax get请求实例代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alice', age:19 }, }, methods:{ send(){ axios({ method:'get', url:'http://www.baidu.com?name=tom&age=23' }).then(function(resp){ console.log(resp.data); }).catch(resp => { console.log('请求失败:'+resp.status+','+resp.statusText); }); }, sendGet(){ axios.get('server.php',{ params:{ name:'alice', age:19 } }) .then(resp => { console.log(resp.data); }).catch(err => { // console.log('请求失败:'+err.status+','+err.statusText); }); }, } }); } </script></head><body> <div id="itany"> <button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div></body></html>
发送post请求(push,delete的非get方式的请求都一样)
1、基本使用格式
格式:axios.post(url,data,[options]);
2、传参方式
1、自己拼接为键值对
2、使用transformRequest,在请求发送前将请求数据进行转换
3、如果使用模块化开发,可以使用qs模块进行转换
4、注释:axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参
新闻热点
疑难解答
图片精选