既然官方已经说了不在维护vue-resource,那我们就看看axios是怎么使用的..........
1)get方法的使用
axios.get
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>axios的初步使用</title> <script src="../lib/vue.js"></script> <script src="../lib/axios.min.js"></script> </head> <body> <div id="app"> <my-f1></my-f1> </div> </body> </html> <script> const c1={ template:` <div v-if="userList.length"> <ul> <li v-for="item in userList">{{item.id}}</li> </ul> </div> `, props:{}, data(){ return { userList:['fd','rr','tt'], } }, mounted(){ this.getList(); }, computed:{ user(){ return this.usersList; } }, methods:{ getList(){ const self=this; axios.get('../data/a1.php',{params:{ id:2 }}).then(function(res){ self.userList=res.data; }).catch(function(res){ console.log(res); }); }, } }; const myVue = new Vue({ el:'#app', components:{ myF1:c1 }, }); </script>
a1.php
<?php header("Content-Type:application/json;charset=UTF8"); $myDB= new PDO('mysql:host=127.0.0.1;dbname=axiox;port=3307','root',''); $id=$_GET['id']; // $fname=$_POST['firstname']; // $lname=$_POST['lastname']; // $body = @file_get_contents('php://input'); // echo $fname ; if($myDB){ $res= $myDB->query("select * from stu"); while($row = $res->fetch( PDO::FETCH_ASSOC)){ // print_r($row); $arr[]=$row; } } else{ die("fali"); } // json_encode($arr); print_r( json_encode($arr)); ?>
以上很简单的一个例子。。。。
我们注意一下请求头的content-type
2)使用post请求
axios.post
当你使用post请求的时候,好像会有一点问题。。。。。
axios.post('../data/a1.php', {//后端就不能使用$_post['']接受参数了,后端要接受请求主体
name:'士大夫', age:33 }) .then(function(res){ self.userList=res.data; }) .catch(function(res){ console.log(res); });
php:
$fname=$_POST['name'];
结果:
好像获取不到请求传递的值......
但是办法还是有的,这个时候我们可以在后端(这里使用的是php),来获取整个请求主体....
$body = @file_get_contents('php://input');
但还是很奇怪,为啥????
看看官方的解释.................
然后我就试试....
getList(){ const self=this; //这里我们不修改请求头,而是修改 userService(手动将post请求参数变为get请求形式,后端可以使用$_POST['参数名'],接受参数) let param = new URLSearchParams(); param.append("firstname", "Fred"); param.append("lastname", "Flintstone"); axios.post('../data/a1.php',param) .then(function(res){ self.userList=res.data; }) .catch(function(res){ console.log(res); }); },
php接受参数;(很明显我前端做了参数处理)
$fname=$_POST['firstname']; echo $fname;
很明显的发现我们现在的请求方式变为:
axios.post('../data/a2.php', { name:'tom', age:33, id:'wodo id shi 222' }) .then(function(res){ self.userList=res.data; }) .catch(function(res){ console.log(res); });
后端:
$body = @file_get_contents('php://input');//接受整个请求主体 $body=json_decode($body) ;//反序列化 $id=$body->id;//获取欲取参数 echo $id;
进一步拓展:
表单提交enctype参数详解之:application/x-www-form-urlencode和multipart/form-data
https://www.lvtao.net/dev/1179.html
<script> const c1={ template:` <div v-if="userList.length"> <ul> <li v-for="item in userList">{{item.id}}</li> <p>this is tea ifno : <table> <tr> <td>id</td> <td>name</td> <td>salary</td> <td>address</td> </tr> <tr> <td>{{tea.id}}</td> <td>{{tea.name}}</td> <td>{{tea.salary}}</td> <td>{{tea.address}}</td> </tr> </table> </p> </ul> </div> `, props:{}, data(){ return { userList:['fd','rr','tt'], tea:{}, } }, mounted(){ axios.all([this.getList(), this.getTea()]) .then(axios.spread(function (acct, perms) { console.log("all request finished"); console.log(acct); })); }, methods:{ getList(){ const self=this; axios.get('../data/a1.php') .then(function(res){ self.userList=res.data; }) .catch(function(res){ console.log(res); }); }, //第二个请求 getTea(){ const self=this; axios.get('../data/a2.php',{ params:{id:2,} //name:'fafa' }).then(function(res){ self.tea =res.data[0]; }); } } }; const myVue = new Vue({ el:'#app', components:{ myF1:c1 }, }); </script>
我在php文件中做了一个延时处理。
a2.php
<?php $conn=mysqli_connect('127.0.0.1','root','','axiox',3307); $sql="SET NAMES UTF8"; mysqli_query($conn,$sql); // $body = @file_get_contents('php://input'); //$body=json_decode($body) ; //$id=$body->id; // $id=$_POST['id']; $id=$_GET['id']; $sql="SELECT * FROM tea WHERE id=$id"; $result=mysqli_query($conn,$sql); $list=mysqli_fetch_assoc($result); $arr=[]; $arr[]=$list; sleep(5); echo json_encode($arr); // print_r( json_encode($res)); ?>
a1.php
<?php // header("Content-Type:application/json;charset=UTF8"); // header("Content-Type:application/x-www-form-urlencoded;charset=UTF8"); $myDB= new PDO('mysql:host=127.0.0.1;dbname=axiox;port=3307','root',''); //$id=$_GET['id']; // $lname=$_POST['lastname']; //$body = @file_get_contents('php://input'); //$fname=$_POST['firstname']; //echo $body ; // echo $fname; if($myDB){ $res= $myDB->query("select * from stu"); while($row = $res->fetch( PDO::FETCH_ASSOC)){ // print_r($row); $arr[]=$row; } } else{ die("fali"); } sleep(5); print_r( json_encode($arr)); ?>
我本以为在js里面axios.all的两个请求都执行问之后才执行 console.log("all request finished");
但是结果不是,而是先输出了这句话,,,,,毁三观
getList(){ const self=this; axios({ method:'get', url:'../data/a2.php', // responseType:'stream', params:{ id:2, } }) .then(function(res) { self.tea=res.data[0]; }); },
5)axios.create的使用,主要用于自定义请求配置。
详情看文档,,,,,
6)拦截器的使用(主要用于在请求等待时候做一些优化处理)
基本语法:
axios.interceptors.request.use(function (config) { // Do something before request is sent console.log("请求之前"); return config;//这句话不能丢 }, function (error) { // Do something with request error console.log("对错误deal"); return Promise.reject(error); })
demo:
创建一个组件
const c1={ template:` <div> <p>this is a demo </p> <table> <tr> <td>id</td> <td>name</td> <td>salary</td> <td>address</td> </tr> <tr> <td>{{tea.id}}</td> <td>{{tea.name}}</td> <td>{{tea.salary}}</td> <td>{{tea.address}}</td> </tr> </table> </div>`, props:{}, data(){ return { tea:{ id:1, name:'eee', salary:1233, address:'中国天安门' }, } }, methods:{ getList(){ const self=this; self.createInter(); axios.get('../data/a4.php',{///a4.php做了延时处理 params:{ id:2 } }).then(function(res){ self.tea=res.data[0]; },function(err){ console.log(err); }); }, createInter(){ const interOne=axios.interceptors.request.use(function (config) { // Do something before request is sent console.log("请求之前"); return config; }, function (error) { // Do something with request error console.log("对错误deal"); return Promise.reject(error); }) const interTwn= axios.interceptors.response.use(function (response) { // Do something with response data axios.interceptors.request.eject(interOne);//取消一个拦截器 console.log("this is after"); return response; }, function (error) { // Do something with response error return Promise.reject(error); }) } }, mounted(){ this.getList(); } }; const myVue=new Vue({ el:'#app', components:{ myF1:c1, } });
实际效果如下:(可以看到在一定的时间延迟之后会输出‘this is after’,并且也请求到了后端数据......)