axios的簡單使用

時間  2019-11-30
標籤 axios 簡單 使用 简体版
原文   原文鏈接

既然官方已經說了不在維護vue-resource，那咱們就看看axios是怎麼使用的..........php

1)get方法的使用html

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));
?>

以上很簡單的一個例子。。。。vue

咱們注意一下請求頭的content-typemysql

 

2）使用post請求ios

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:sql

$fname=$_POST['name'];

 

結果:json

好像獲取不到請求傳遞的值......axios

可是辦法仍是有的，這個時候咱們能夠在後端（這裏使用的是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;

 

很明顯的發現咱們如今的請求方式變爲：

Content-Type:application/x-www-form-urlencoded;charset=UTF-8
 
問題來了，我不想使用這個 let param = new URLSearchParams();可是又想發送個人post請求怎麼辦？？
 
那麼就讓後端作處理了
前端：（不作處理） 
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

 

3）axios.all的使用
咱們可能要在多個請求完成以後，在進行下一步操做，這裏涉及到一個異步問題，可是axios.all就能夠幫咱們輕鬆解決這個問題。。。
我本覺得是這樣，可是結果好像不是這樣。。。。。。。。。。。。。。。。。。。
【多是我理解有誤，若是有人能指正，很感激。。】
先看看個人例子 
<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");

可是結果不是，而是先輸出了這句話，，，，，毀三觀

 

4）axios({.....})的使用（比較簡單，不具體說明了） 
 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’,而且也請求到了後端數據......）

 

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程