Axios异步通信

最新推荐文章于 2023-06-16 21:43:56 发布

Java-呆萌老师

最新推荐文章于 2023-06-16 21:43:56 发布

阅读量1k

点赞数

分类专栏： Java基础知识文章标签： ajax javascript jquery

本文链接：https://blog.youkuaiyun.com/daimenglaoshi/article/details/128367471

版权

本文介绍了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":

最低0.47元/天解锁文章