Vue的axios发送异步请求的使用

ゝ一纸荒年。 2022-11-07 14:30 275阅读 0赞

## Vue的axios发送异步请求的使用 ##

--------------------

**Axios是一个开源的可以用在浏览器端和Nodejs的异步通信框架，主要实现ajax异步通信。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]

vue2.0后推荐使用axios框架，少用jquery，因为jquery操作Dom太过频繁。

**下面我用CDN的方式加载axios需要的环境来演示Axios的使用：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>		
    		
    		<style> [v-cloak]{ display: none; } </style>
    	</head>
    	<body>
    		<div id="app" v-cloak>
    			//获取vue的值
    			<li>{
       {info.name}}</li>
    			//v-bind 绑定属性 获取vue中的值
    			<a v-bind:href="info.url">点击</a>
    		</div>
    	</body>	
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    	<script> var vm = new Vue({ el:"#app", data () { return { info: { name:null, age:null, url:null } } }, mounted () { //编译好的html挂载到页面完成后执行的事件 （我们通常叫钩子） //访问同级下的data.json文件 axios.get('data.json').then(response=>(this.info = response.data)); } }) </script>	
    	
    </html>

访问的data.json文件中的数据：

{ 
    	"name":"yang",
    	"age":20,
    	"sex":"男",
    	"url":"https://www.baidu.com/"
    }

显示效果：  
![在这里插入图片描述][20210312162756451.png]

这里注意的是如果axios的then回调函数的时候需要用ES6特性 ：response=>(this.info = response.data)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aHV6aHV5YW5n_size_16_color_FFFFFF_t_70]: /images/20221023/d040a86b46ba41579bda6ca1589d0a33.png
[20210312162756451.png]: /images/20221023/fa0e4946d0c44b20aa3dfd9e220dc197.png