【Vue】通过Axios实现异步通信（简单案例）

embedded/2024/9/25 5:47:21/

一、Axios介绍

1、是什么

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。当然这些请求ajax和jquery也能做，但是由于Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。这样一来Axios就会更加方便。

2、特性

官网连接：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

3、安装

使用 npm（使用Vue框架的时候安装）:

$ npm install axios

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4、使用语法

以post和get请求为例（ps:axios的使用有很多种方法）：

post请求(ps:在URL后可以携带参数)

axios.post('URL') .then(function(response){ })；

get请求(ps:在URL后可以携带参数)

axios.get('URL') .then(function(response){ })；

二、案例实操

这里我们通过一个代码段来实现一下axios的数据请求功能。

①：我们准备好vue和axios所需的cdn：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②：编写一段data.json

{"name": "lfy","age": 18,"url": "http://baidu.com","page": 1,"address": {"street": "快乐街","city": "成都","country": "中国"},"list": ["Java","c++","Php"]
}

③：在vue实例中，编写对象接受data.json的数据，并通过前端显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="vue"><div>{{info.name}}</div><div v-for="item in info.list">{{item}}</div><a v-bind:href="info.url">点我</a>
</div><!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">var vm=new Vue({el:"#vue",data(){//这是一个data函数return{//请求的返回参数必须和json字符串格式一样info:{name:null,address:{street:null,city:null,country:null},url:null,list:[]}}},mounted(){//钩子函数 链式编程 ES6新特性axios.get('../data.json').then(response=>(console.log(this.info=response.data)))}});
</script>
</body>
</html>

效果：