Vuejs发送Ajax请求

一、概况

①vuejs中没有内置任何ajax请求方法

②在vue1.0版本，使用的插件 vue resource 来发送请求，支持promise

③在vue2.0版本，使用社区的一个第三方库 axios ，也支持promise

④在HTML5时代，浏览器增加了一个特殊的异步请求方法 fetch，原生支持promise，由于兼容性问题，一般用于移动端

⑤还有的项目会使用vue和jquery混用，借助jQuery的ajax方法

二、axios库的使用

①安装和引入：

• npm直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

npm install axios

• 网上直接下载axios.min.js文件，或者使用cdn，通过script src的方式进行文件的引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②发送get请求

• 基本使用格式：

axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典 axios.get(url[,options]);

• 传参方式：通过url传参，通过params选项传参
• 案例： <div id="app"><button @click='send'>发送Ajax请求</button><button @click='sendGet'>GET方式发送Ajax请求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{send(){axios({method:'get',url:'http://www.baidu.com?name=jack&age=30'}).then(function(resp){console.log(resp.data);}).catch(err=>{console.log('请求失败:'+err.status+','+err.statusText);});},sendGet(){axios.get('server.php',{params:{name:'tom',age:20}}).then(resp=>{console.log(resp.data)}).catch(resp=>{console.log('请求失败:'+err.status+','+err.statusText);});},},});</script>

③发送post请求（push,delete的非get方式的请求都一样）

• 基本使用格式

axios.post(url,data,[options]);

• 传参方式：自己拼接为键值对；使用transformRequest，在请求发送前将请求数据进行转换；如果使用模块化开发，可以使用qs模块进行转换；
• 注意：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
• 案例：

<div id="app"><button @click='sendPost'>post方式发送Ajax请求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{sendPost(){axios.post('server.php',this.user,{transformRequest:[function(data){let params='';for(let index in data){params+=index+'='+data[index]+'&';}return params;}]}).then(resp=>{console.log(resp.data)}).catch(err=>{console.log('请求失败:'+err.status+','+err.statusText);});},},});</script>

④发送跨域请求：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库，可以使用vue-resource发送跨域请求

转载于:https://www.cnblogs.com/EricZLin/p/9380406.html

总结

以上是生活随笔为你收集整理的Vuejs发送Ajax请求的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。