Axios异步通信

本文介绍了Axios作为异步通信工具的使用,包括Axios的定义、与Ajax的关系、使用Axios的原因以及详细的API和使用示例,如get和post请求的实现,通过实例展示了如何与服务器进行数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

四.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":
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值