Vue之Axios非同步通訊詳解

阿新 • • 發佈：2021-11-18

1、首先我們建立一個.on檔案，作為互動使用，我們列舉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",{
      "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="">
    <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/">
    var vm = new Vue({
        el: "#vue",// 注意：* data 是全域性的，在大專案中容易汙染資料 * 將data封裝成一個函式，我們在例項化元件的時候只是呼叫了這個函式生成的資料副本，避免了資料汙染，這裡作為講解就不寫了。
        data(){
            return{
                // 請求的返回引數格式應該和json字串一樣，比較標準一點，當然直接為空也是可以的。
                info:{
                    name: null,address:{
             
            street: null,city: null,country: null
                    },}
            }
        },mounted(){//鉤子函式，就是程式執行的www.cppcns.com時候他可以插入程式的中間去執行
            //鏈式，記得使用ES6支援版本
            axios.get('../data.json').then(rewww.cppcns.comsponse=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

執行結果：

在這裡插入圖片描述

3、當然上面http://www.cppcns.com是比較標準的寫法，我們不妨簡寫一下：

<!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/script">
    var vm = new Vue({
        el: "#vue",// 注意：這裡是data:{}，但裡面一定有一個原始引數info，然後axios獲取到的資料繫結到info上
        // data是屬性 ，屬性值可以是物件 也可以是函式，函式本質上也是物件，vue會對dawww.cppcns.comta屬性做型別判斷採取不同的處理方式
        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>