Vuejs發送Ajax請求

時間 2019-11-08

標籤 vuejs 發送 ajax 請求欄目 Ajax 简体版

原文原文鏈接

1、概況

①vuejs中沒有內置任何ajax請求方法php

②在vue1.0版本，使用的插件 vue resource 來發送請求，支持promisevue

③在vue2.0版本，使用社區的一個第三方庫 axios ，也支持promisenode

④在HTML5時代，瀏覽器增長了一個特殊的異步請求方法 fetch，原生支持promise，因爲兼容性問題，通常用於移動端jquery

⑤還有的項目會使用vue和jquery混用，藉助jQuery的ajax方法ios

2、axios庫的使用

①安裝和引入：git

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請求github

基本使用格式：

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方式的請求都同樣）ajax

基本使用格式

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>