Vue之Axios異步通信詳解

Posted on by

1、首先我們創建一個.json文件，作為交互使用，我們列舉json數據格式模擬傳遞到前端來幫助小夥伴們理解。

{
  "name": "咸魚_翻身",
  "url": "https://blog.csdn.net/aaa123_456aaa",
  "page": 1,
  "address": {
    "street": "湘橋區",
    "city": "潮州市",
    "country": "中國"
  },
  "links": [
    {
      "name": "咸魚_翻身1",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸魚_翻身2",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "咸魚_翻身3",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    }
  ]
}

記得看一下自己的環境哦，這裡要選支持ES6才行。

在這裡插入圖片描述

2、接下來我們創建一個.html文件，使用Axios異步通信，來實現數據通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 是全局的，在大項目中容易污染數據 * 將data封裝成一個函數，我們在實例化組件的時候隻是調用瞭這個函數生成的數據副本，避免瞭數據污染，這裡作為講解就不寫瞭。
        data(){
            return{
                // 請求的返回參數格式應該和json字符串一樣，比較標準一點，當然直接為空也是可以的。
                info:{
                    name: null,
                    address:{
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){//鉤子函數，就是程序執行的時候他可以插入程序的中間去執行
            //鏈式編程，記得使用ES6支持版本
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運行結果：

在這裡插入圖片描述

3、當然上面是比較標準的寫法，我們不妨簡寫一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:{}，但裡面一定有一個原始參數info，然後axios獲取到的數據綁定到info上
        // data是屬性 ，屬性值可以是對象 也可以是函數，函數本質上也是對象，vue會對data屬性做類型判斷采取不同的處理方式
        data: {
            info:{}
            },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運行結果：

在這裡插入圖片描述

4、我們對於url的交互要註意一下，因為這個要使用v-bind來綁定值。

<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
        <a v-bind:href="info.url">點擊進入我的博客</a>
    </div>
</div>

點擊將會跳轉，有興趣的小夥伴可以點個關註呀！

在這裡插入圖片描述

5、提示

有些朋友可能網絡不好，你就會看見頁面加載過程中會先加載一個模板，這與他Vue的生命周期有關：

在這裡插入圖片描述

在這裡插入圖片描述

有些小夥伴可能會覺得很醜，這裡就提供一個解決方法，讓他的那一瞬間變成白色，而不是先出現模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--v-clock：解決閃爍問題 -->*/
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--自定義一個v-clock-->
<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：