7.1. What is Axios
Axios is an open source asynchronous communication framework that can be used in the browser and Node JSits main function is to realize AJAX asynchronous communication. Its features are as follows:
- Create from browser
XMLHttpRequests - Create http request from node.js
- Support Promise API [chain programming in JS]
- Intercept requests and responses
- Convert request data and response data
- cancel the request
- Automatically convert JSON data
- The client supports defense against XSRF (Cross Site Request Forgery)
GitHub: https://github.com/axios/axios
Chinese documentation: http://www.axios-js.com/
7.2. Why use Axios
Because it Vue.jsis a view layer framework and the author (You Yuxi) strictly adheres to the SoC (the principle of separation of concerns), it Vue.jsdoes not include the communication function of AJAX. In order to solve the communication problem, the author has developed a separate vue-resourceplug-in named, but in the entry After version 2.0, the maintenance of the plugin was stopped and the Axiosframework was recommended. Use jQuery sparingly because it manipulates Dom too often!
7.3. The first Axios app
Most of the interfaces we develop are in JSON format. You can simulate a piece of JSON data in the project first. The data content is as follows: Create a file named data.json and fill in the above content, and put it in the root directory of the project
{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
test code
<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="vue">
<div>地名：{
{info.name}}</div>
<div>地址：{
{info.address.country}}--{
{info.address.city}}--{
{info.address.street}}</div>
<div>链接：<a v-binf:href="info.url" target="_blank">{
{info.url}}</a> </div>
</div>
<!--引入js文件-->
<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：属性：vm
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//钩子函数
axios
.get('data.json')
.then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
illustrate:
- Here, v-bind is used to bind the attribute value of a:href to the data in the Vue instance
- Use the get method of the axios framework to request AJAX and automatically encapsulate the data into the data object of the Vue instance
- Our data structure in data must
Ajaxmatch the format of the data returned in the response!
Official document: https://cn.vuejs.org/v2/guide/instance.html#Life cycle illustration
Vue instance has a complete life cycle, that is, from the beginning of creating the first girl data, compiling templates, mounting A series of processes such as DOM, rendering-updating-rendering, unloading, etc., we call this the life cycle of Vue. In layman's terms, it is the process of Vue instance from creation to destruction, which is the life cycle.
In the entire life cycle of Vue, it provides a series of events that allow us to register JS methods when events are triggered, and allow us to control the overall situation with our registered JS methods. This in these event response methods directly points to is an instance of Vue.