Vue JS(二)-Axios

最新推荐文章于 2023-11-25 09:00:00 发布

大小不少年

最新推荐文章于 2023-11-25 09:00:00 发布

阅读量306

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/zhangzhanpu/article/details/120274995

版权

四、jQuery中的post请求/Axios中的post请求对比

1.Axios中的Post请求格式

2.jQuery中的post请求格式

3.restFul的格式是将参数拼接到URL中采用特殊的方式获取数据

4.axios-async-await-基本请求路径练习

一、Axios介绍

Axios 是一个基于promise 的HTTP库，可以用在浏览器和node.js中

特点：

1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

注： 1.JS中原生提供了Ajax操作弊端：操作特别的复杂，易用性较差

2.jQuery中的Ajax，封装了原生的 JS Ajax ，提高了开发的效率

3.Axios是VUE中默认支持的Ajax的请求的方式，调用简洁，解决了回调地狱问题

二、回调地狱问题

回调函数中嵌套回调函数的情况就叫回调地狱，回调地狱是为了实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

三、Axios入门案例

1.编辑后台代码完成业务获取

2.Axios调用步骤

（1）导入Axios的JS文件

（2）发起Ajax请求

（3）解析返回值

	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 注意事项:
			 * 	  1.Axios将原来的嵌套的结构,改为链式加载方式
			 *    2.回调函数中的data,不是服务器的返回值,是promise对象
			 * 
			 * 发起Ajax请求:
			 * 	1. GET请求获取数据
			 */
			axios.get("http://localhost:8090/axios/getUser")
					 .then(function(result){//promise对象
						//获取服务器返回值  promise.data
						 console.log(result.data)
					 })
			
		</script>
	</body>

promise对象说明：其中data表示服务器的返回值

3.Axios-Get-携带参数

（1）简单参数：URL: http://localhost:8090/axios/getUserById?id=100

（Integer id）接收

（2）resultFul结构：URL: http://localhost:8090/axios/user/tomcat/18

（User user）接收

（3）对象传参："http://localhost:8090/axios/user/getUserObj",{params: user})

注：key: value key固定写法 params ：参数对象

@GetMapping（“/axios/user/getUserObj”）（User user）接收

4.Axios-Delete 请求

（1）不带参数的删除
axios.delete(“url地址”).then(function(result){ … })

（2）携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })

（3）restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })

（4）采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {params: 封装后的对象}).then(function(result){ … })

5.Axios-post请求

（1）提交请求

<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })
					
		</script>
	</body>
</html>

注：如果采用post的方式传递对象，则数据结构是一个JSON

（2）接收请求

四、jQuery中的post请求/Axios中的post请求对比

1.Axios中的Post请求格式

如果传递的数据是JSON串 ,则在后端采用@RequestBody注解接收，实现JSON串转化为对象

2.jQuery中的post请求格式

如果采用form表单的方式提交,则可以直接采用对象的方式接收 name=xxx&age=xx&sex=xx