Vue中如何通過Axios實現非同步通訊
阿新 • • 發佈：2021-07-21
前言——瞭解Vue例項的生命週期
下圖展示了例項的生命週期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。
引入Axios的CDN
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
實踐
建立一個json檔案
{ "name": "LZP", "friendLink": "https://www.cnblogs.com/peng", "languages": ["Java", "C#", "Vue", "Python", "C++", "SQL"],"loves": [ { "楊過": "小龍女" }, { "郭靖": "黃蓉" }, { "張無忌": "趙敏" }, { "小福貴": "小飛蝶" } ] }
建立一個HTML檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo06_Vue元件</title> <scripttype="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <!-- view層 模板 --> <div id="app"> <div>{{user.name}}</div><div>{{user.friendLink}}</div> <ol> <li v-for="language in user.languages">{{language}}</li> </ol> <ul> <li v-for="love in user.loves">{{love}}</li> </ul> </div> <script type="text/javascript"> let vue = new Vue({ el: "#app", data() { return { // 這裡user的屬性要跟後臺拿到的json資料中的屬性對應 user: { name: null, friendLink: null, languages: null, loves: null } } }, mounted() { this.getUserInfo(); }, methods: { getUserInfo() { // 非同步通訊，傳送get請求獲取使用者資訊 // 鉤子函式、箭頭函式 axios.get("../vue-json.json").then(response => { this.user = response.data }).catch(error => { console.log(error) }); } } }); </script> </body> </html>
測試
在IDEA中通過Firefox瀏覽器開啟，頁面效果如下：
總結
為了實現Axios與後端的非同步通訊（當然這裡我們只是模擬，資料是前端的測試資料哈），我們是利用Axios傳送get請求（post也行），然後通過Vue例項的生命週期中的mounted()鉤子函式去呼叫我們在methods中封裝好的getUserInfo()函式，並拿到json檔案中的資料最後顯示到前端頁面中