四.Axios异步通信
1 什么是Axios?
Axios是一个类库,基于Promise管理的HTTP 库,是前端通信框架,可以用在浏览器和 node.js 中。axios实现了对ajax的封装,常用于Ajax请求。
注解:promise是Java Script的一个对象,代表了未来将要发生的事件,用来传递异步操作的消息。
2 Axios和Ajax的关系
Axios是AJAX技术的一种实现,就像Jquery中的$.ajax也是AJAX技术的一种实现。
Axios是通过Promise实现XHR封装,其中Promise是控制手段,XHR是实际发送Http请求的客户端。
Jquery中的$.ajax是通过callback+XHR实现(XHR就是XmlHttpRequest对象)
再通俗一点讲:AJAX是汽车,Axios是奥迪,$.ajax是奔驰
3 为什么要用Axios?
因为vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource 的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架,此时就需要额外使用一个通信框架与服务器交互。
功能就像jQuery提供的AJAX通信功能。
4 Axios的API
axios({
method: 'get',
url: '/user/12345',
data: {
id:1,
name:'aa'
}
});
axios.get('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.post('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.put('url'[,'参数']).then(resp=>(this.user=resp.data));
axios.delete('url'[,'参数']).then(resp=>(this.user=resp.data));
5 Axios的使用
axios提供了多种请求方式,比如直接发起get或post请求:
5.1.get请求
案例1
a.模拟后端接口传递回的json数据
咱们后端开发的接口大部分都是采用 JSON 格式,我们可以创建一个文件存放json数据用来模拟后端接口传递过来的数据。
user.json页面:模拟服务器端返回的数据
{
"id":1,
"name": "呆萌老师",
"qq": "2398779723",
"weixin":