快捷導(dǎo)航

Vue之Axios異步通信詳解

更新時間：2021年11月16日 11:16:48 作者：咸魚_翻身

這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

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

{
  "name": "咸魚_翻身",
  "url": "https://blog.csdn.net/aaa123_456aaa",
  "page": 1,
  "address": {
    "street": "湘橋區(qū)",
    "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"
    }
  ]
}

記得看一下自己的環(huán)境哦，這里要選支持ES6才行。

在這里插入圖片描述

2、接下來我們創(chuàng)建一個.html文件，使用Axios異步通信，來實現(xiàn)數(shù)據(jù)通信。

<!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/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 是全局的，在大項目中容易污染數(shù)據(jù) * 將data封裝成一個函數(shù)，我們在實例化組件的時候只是調(diào)用了這個函數(shù)生成的數(shù)據(jù)副本，避免了數(shù)據(jù)污染，這里作為講解就不寫了。
        data(){
            return{
                // 請求的返回參數(shù)格式應(yīng)該和json字符串一樣，比較標準一點，當(dāng)然直接為空也是可以的。
                info:{
                    name: null,
                    address:{
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){//鉤子函數(shù)，就是程序執(zhí)行的時候他可以插入程序的中間去執(zhí)行
            //鏈式編程，記得使用ES6支持版本
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運行結(jié)果：

在這里插入圖片描述

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

<!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/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:{}，但里面一定有一個原始參數(shù)info，然后axios獲取到的數(shù)據(jù)綁定到info上
        // data是屬性 ，屬性值可以是對象 也可以是函數(shù)，函數(shù)本質(zhì)上也是對象，vue會對data屬性做類型判斷采取不同的處理方式
        data: {
            info:{}
            },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

運行結(jié)果：

在這里插入圖片描述

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

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

點擊將會跳轉(zhuǎn)，有興趣的小伙伴可以點個關(guān)注呀！

在這里插入圖片描述

5、提示

有些朋友可能網(wǎng)絡(luò)不好，你就會看見頁面加載過程中會先加載一個模板，這與他Vue的生命周期有關(guān)：

在這里插入圖片描述

有些小伙伴可能會覺得很丑，這里就提供一個解決方法，讓他的那一瞬間變成白色，而不是先出現(xiàn)模板：

<!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>