Axios异步通信

野性酷女 2024-03-30 10:21 57阅读 0赞

### 四.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",
      "wei