一 简介
1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现
2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
3、参考：GitHub上搜索axios，查看API文档
二 使用vue-resource发送AJAX请求
1、安装vue-resource并引入
yarn add vue-resource
npm install --save vue-resource
在main.js中引入
import VueResource from 'vue-resource';
Vue.use(VueResource);
2、发送get请求：
this.$http.get('http://api.fat.tianlu56.com.cn/order/orderIn/list',{ pageSize:'20', pageNo:'1', token:'token-5A973431EEC947459D7A0F56A31A2550' }).then(function (data) { console.log(data);//成功 },function (res) { console.log(res);//失败 })
3、发送post请求：
this.$http.post('http://api.fat.tianlu56.com.cn/order/orderIn/list',{ pageSize:'20', pageNo:'1', token:'token-5A973431EEC947459D7A0F56A31A2550' },{ emulateJSON:true }).then(function (data) { console.log(data);//成功 },function (res) { console.log(res);//失败 });
4、跨域请求：
方式一：
this.$http({ method:'jsonp', url:'https://api.douban.com/v2/movie/top250', jsonp:'callback', params:{ start:0, count:10 } }).then(function (data) { console.log(data);//判断状态是否请求成功 },function (res) { console.log(res); })
方式二：
this.$http.jsonp('https://sug.so.360.cn/suggest', {params:{ word:'a' }} ).then(function (resp) { console.log(resp.data) })
三 使用axios发送AJAX请求
1、安装axios并引入
1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modulesaxiosdist中
2、网上直接下载axios.min.js文件
3、通过script src的方式进行文件的引入
2、发送get请求
- 基本使用格式
格式1：axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典
格式2：axios.get(url[,options]);
- 传参方式：
通过url传参
通过params选项传参
<!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>
3、发送post请求（push,delete的非get方式的请求都一样）
- 基本使用格式
格式：axios.post(url,data,[options]);
- 传参方式
1、自己拼接为键值对
2、使用transformRequest，在请求发送前将请求数据进行转换
3、如果使用模块化开发，可以使用qs模块进行转换
4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
<!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:{ sendPost(){ // axios.post('server.php',{ // name:'alice', // age:19 // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据 // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据 axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串 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> </head> <body> <div id="itany"> <button @click="send">发送AJAX请求</button> <button @click="sendGet">GET方式发送AJAX请求</button> </div> </body> </html>
4、发送跨域请求
须知：axios本身并不支持发送跨域的请求，没有提供相应的API