Detailed explanation of Axios asynchronous communication in Vue

1. First, we create a .json file for interactive use. We list the json data format and simulate passing it to the front end to help our friends understand.

{
  "name": "Salted fish_turn over",
  "url": "https://blog.csdn.net/aaa123_456aaa",
  "page": 1,
  "address": {
    "street": "Xiangqiao District",
    "city": "Chaozhou City",
    "country": "China"
  },
  "links": [
    {
      "name": "Salted Fish_Turn Over 1",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "Salted Fish_Turn Over 2",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    },
    {
      "name": "Salted Fish_Turn Over 3",
      "url": "https://blog.csdn.net/aaa123_456aaa"
    }
  ]
}

Remember to check your environment. You need to choose to support ES6 here.

insert image description here

2. Next, we create a .html file and use Axios asynchronous communication to realize data communication.

<!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",
        // Note: * data is global and it is easy to pollute data in large projects* Encapsulate data into a function. When instantiating the component, we just call the data copy generated by this function to avoid data pollution. I will not write it here as an explanation.
        data(){
            return {
                // The format of the request return parameter should be the same as the json string, which is more standard. Of course, it can be empty directly.
                info:
                    name: null,
                    address:{
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){//Hook function, that is, when the program is executed, it can be inserted into the middle of the program to execute //Chain programming, remember to use the ES6 support version axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

Running results:

insert image description here

3. Of course, the above is a relatively standard way of writing, so let’s abbreviate it:

<!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",
        // Note: Here is data:{}, but there must be an original parameter info in it, and then the data obtained by axios is bound to info // data is an attribute, and the attribute value can be an object or a function. Functions are essentially objects. Vue will judge the type of data attributes and take different processing methods data: {
            info:{}
            },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

Running results:

insert image description here

4. We need to pay attention to the interaction with the URL, because v-bind is used to bind the value.

<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
        <a v-bind:href="info.url">Click to enter my blog</a>
    </div>
</div>

Click to jump, friends who are interested can follow us!

insert image description here

5. Tips

Some friends may have a bad network, and you will see that a template will be loaded first during the page loading process. This is related to the life cycle of Vue:

insert image description here

Some of you may find it ugly, so here is a solution to make it turn white at that moment instead of showing the template first:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--v-clock: Solve the flickering problem-->*/
        [v-clock]
            display: none;
        }
    </style>
</head>
<body>
<!--Customize a v-clock-->
<div id="vue" v-clock>
    <div>
        {{info.name}}
        {{info.address}}
    </div>
</div>