vue（6）—— vue中向後端異步請求

時間  2019-12-10
標籤 vue 向後 異步 請求 简体版
原文   原文鏈接

異步請求

 

其實什麼是異步請求已經不用多說了，通俗的說，就是整個頁面不會刷新，須要更新的部分數據作局部刷新，其餘數據不變。javascript

學到這裏，你應該用過jquery裏的ajax了，因此很能理解了，很少說了。詳細的就本身百度了css

 

在vue中，能夠作異步請求的有vue-resource和axioshtml

 

後端項目準備：

 

我用的Python做爲後端語言，用的Python的django框架做爲後端的web服務，且用的是django-rest-framework作成了先後端分離的項目，本文着重點不在Python後端這方面，感興趣的能夠看個人Python相關文章，這裏就不涉及Python的講解，我直接把項目代碼放在這，能夠直接用個人服務端項目，前提你得裝了相關的開發環境（Python+django+djangorestframework）前端

 

項目文件：點我 vue

 

API接口：

 

 

API接口 支持請求方式 請求參數
http://127.0.0.1/data/ get,post

get:空java

post:{'name':XX,'age':xx,'pwd':xx,'brief':xxx}node

http://127.0.0.1/retrieve/:idjquery

（id爲整形）ios

 put,delete

put:{'name':XX,'age':xx,'pwd':xx,'brief':xxx}web

delete: 空

 

數據庫字段數據：

 

好，接下來就開始作異步請求了

 

vue-resource

 

vue-resource是vue官方團隊的人開發的，在vue2.0出來以後，開發vue-resource的人表示再也不更新，放棄維護，並推薦使用axios，具體緣由不深究，總之使用的比較多的仍是axios，axios下面會介紹，這裏仍是稍微用下vue-resource怎麼用的

 

安裝

 

一樣的，用npm包安裝：

 

引入包：

 

引入安裝的本地包：

 

引入cdn包：

 

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

 

 

使用-get請求

 

這裏就只展現一個get請求了，在axios再展現其餘的請求方式，實際開發中估計已經用的很少，瞭解下就好了，我感受和axios的語法差不了多少。

好的，做爲服務端的代碼就是上面的django項目，若是沒有Python的django環境的，也能夠本身配置一個後端，反正能正常返回數據就行

 

 

 

正常返回了對吧

 

其實vue-resource的get請求也能夠傳入參數的，而後這些都不深究了，仍是那句，做爲了解便可，由於你會發現axios很相似

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-resource/dist/vue-resource.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    this.$http.get('http://127.0.0.1:8000/data/',)
                    .then(function (data) { //正確的回調
                        this.msg = data
                        console.log(data.data);
                    }, function (data) {   // 錯誤的回調
                        console.log(data)
                    });

                }
            },

        })
    </script>
</body>

</html>
vue-resource

 

 

axios

axios如今很是流行，開玩笑，vue官方都推薦它，用的人確定多啊，很少說了，詳細本身看官網文檔吧，這裏有箇中文版的官網：傳送門

 

安裝

 

導包

 

導入本地包：

 

導入cdn包：

 

<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

 

使用

 

這裏用的後端服務仍是上面給的那個django項目

 

get請求

 

能夠返回結果。

 

axios的function函數this對象

可是發如今html結構上並無把數據渲染出來，按理說，明明已經拿到數據，可是並無正常渲染給p標籤，這個是個大衆都容易犯的錯，不少人都卡在這裏，都納悶啊，在進入axios的先後，打印this對象看看：

 

發現問題了，進入axios以後，this對象改變了，變成了根對象了，這個怎麼辦呢

 

1.大衆都能想到的辦法，用一個臨時變量接收：

 

能夠用，不過不太推薦這個方法

 

2.利用箭頭函數，永遠綁定this對象：

 

 

 

這樣就完事了，咱們也不須要去本身定義一個臨時變量存儲，很方便的

 

至於什麼是箭頭函數，這裏很少說，在前端基礎部份內容裏會說，大概就說下，箭頭函數的格式：

() =>{

}

若是沒有參數的話，括號能夠省略

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    console.log(this) // 以前
                    axios.get('http://127.0.0.1:8000/data/')
                    .then((data)=>{ // 正確的回調
                        console.log(this) // 以後
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 錯誤的回調
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>
axios-get

 

 

get請求也能夠傳入參數的

 

此時這裏就不展現了，自行研究了

 

 

post請求

 

 這裏要注意一下，若是是非get方式的傳參，按文檔：

 

須要用URLsearchParams對象把參數做url編碼

 

 

注：

 

URLsearchParams.append()方法接收兩個參數，一個是鍵，一個是值，一次只能傳一對鍵值，因此這裏有點繁瑣

不過我以爲應該有一次性傳入多個參數的方法，這裏不去深究了，這是隻是展現案例，感興趣自行研究

 

最後結果，確實添加進來了：

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    params.append('age',60)
                    params.append('brief','我什麼簡介要你管')
                    params.append('name','老王')
                    params.append('pwd','123')
                    console.log(params)
                    axios.post('http://127.0.0.1:8000/data/',params)                    
                    .then((data)=>{ // 正確的回調
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 錯誤的回調
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>
axios-post

 

 

put請求

 

其實axios的post同樣能夠完成put、delete等的請求，官方說的是爲了方便起見，取了別名：

 

好的，話很少說，直接幹

 

我要修改老王的密碼：

 

修改以前，老王的密碼是123：

 

 

 

修改以後，老王的密碼成了pwd1929...，正好就是咱們剛纔改的那個密碼

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    params.append('age',60)
                    params.append('brief','我什麼簡介要你管')
                    params.append('name','老王')
                    params.append('pwd','pwd192924')
                    console.log(params)
                    axios.put('http://127.0.0.1:8000/retrieve/6',params)                    
                    .then((data)=>{ // 正確的回調
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 錯誤的回調
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>
axios-put

 

 

 

delete請求

這個就簡單了，直接上代碼，在以前，數據庫的數據以下，我要刪除id爲7的那個數據：

 

開幹：

 

 

 刪除以後的數據庫，確實沒有了：

 

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
        
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    var params = new URLSearchParams();
                    axios.delete('http://127.0.0.1:8000/retrieve/7')                    
                    .then((data)=>{ // 正確的回調
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 錯誤的回調
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>
axios-delete

 

axios其餘相關配置：

axios能夠直接掛載在vue實例的屬性上：

 

Vue.prototype.$axios = axios   // 注意是prototype，不是property
this.$axios.get(....)

 

正常訪問：

 

能夠配置默認url

 

在之後大型項目中，若是請求屢次，那麼是否是你這代碼每次都要寫url，並且若是url改變的話，每一個異步請求的部分都要改，這樣不利於維護，因此能夠配置個默認的url前綴：

 

axios.defaults.baseURL = 'http://127.0.0.1:8000'  // 注意是defaults和baseURL
axios.get('/xxx/')

 

 

 

代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="clickHander" >點我</button>
        
    </div>
    <script>
        Vue.prototype.$axios = axios;
        axios.defaults.baseURL = 'http://127.0.0.1:8000'
        const app = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                clickHander() {
                    this.$axios.get('/data/')                    
                    .then((data)=>{ // 正確的回調
                        console.log(data.data);
                        this.msg = data.data
                    })
                    .catch((error)=>{ // 錯誤的回調
                        console.log(error)
                    })
                }
            },
        })
    </script>
</body>

</html>
axios-baseURL-掛載到vue實例屬性上

 

 

總結：

很是簡單，仍是那句，多看官方文檔

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