您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue Axios的異步通信怎么實現(xiàn)的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue Axios的異步通信怎么實現(xiàn)文章都會有所收獲,下面我們一起來看看吧。
Axios是一個開源的可以用在瀏覽器端和Node JS
的異步通信框架, 她的主要作用就是實現(xiàn)AJAX異步通信,其功能特點如下:
從瀏覽器中創(chuàng)建XMLHttpRequests
從node.js創(chuàng)建http請求
支持Promise API[JS中鏈?zhǔn)骄幊蘛
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF(跨站請求偽造)
由于Vue.js
是一個視圖層框架并且作者(尤雨溪) 嚴(yán)格準(zhǔn)守SoC(關(guān)注度分離原則)所以Vue.js
并不包含AJAX的通信功能, 為了解決通信問題, 作者單獨開發(fā)了一個名為vue-resource
的插件, 不過在進(jìn)入2.0版本以后停止了對該插件的維護(hù)并推薦了Axios
框架。少用jQuery, 因為它操作Dom太頻繁!
咱們開發(fā)的接口大部分都是采用JSON格式, 可以先在項目里模擬一段JSON數(shù)據(jù), 數(shù)據(jù)內(nèi)容如下:創(chuàng)建一個名為data.json的文件并填入上面的內(nèi)容, 放在項目的根目錄下
{ "name": "狂神說Java", "url": "https://blog.kuangstudy.com", "page": 1, "isNonProfit": true, "address": { "street": "含光門", "city": "陜西西安", "country": "中國" }, "links": [ { "name": "bilibili", "url": "https://space.bilibili.com/95256449" }, { "name": "狂神說Java", "url": "https://blog.kuangstudy.com" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }
測試代碼
<!DOCTYPE html> <html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--v-cloak 解決閃爍問題--> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="vue"> <div>地名:{{info.name}}</div> <div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div> <div>鏈接:<a v-binf:href="info.url" target="_blank">{{info.url}}</a> </div> </div> <!--引入js文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#vue", //data:屬性:vm data(){ return{ info:{ name:null, address:{ country:null, city:null, street:null }, url:null } } }, mounted(){//鉤子函數(shù) axios .get('data.json') .then(response=>(this.info=response.data)); } }); </script> </body> </html>
說明:
1.在這里使用了v-bind將a:href的屬性值與Vue實例中的數(shù)據(jù)進(jìn)行綁定
2.使用axios框架的get方法請求AJAX并自動將數(shù)據(jù)封裝進(jìn)了Vue實例的數(shù)據(jù)對象中我們在data中
3.的數(shù)據(jù)結(jié)構(gòu)必須和Ajax
響應(yīng)回來的數(shù)據(jù)格式匹配!
Vue實例有一個完整的生命周期,也就是從開始創(chuàng)建初女臺化數(shù)據(jù)、編譯模板、掛載DOM、渲染一更新一渲染、卸載等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程,就是生命周期。
在Vue的整個生命周期中,它提供了一系列的事件,可以讓我們在事件觸發(fā)時注冊JS方法,可以讓我們用自己注冊的JS方法控制整個大局,在這些事件響應(yīng)方法中的this直接指向的是Vue的實例。
關(guān)于“Vue Axios的異步通信怎么實現(xiàn)”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“Vue Axios的異步通信怎么實現(xiàn)”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。