promise使用ajax前后端调用的高级用法

最新推荐文章于 2023-04-07 19:41:13 发布

银河系的一束光

最新推荐文章于 2023-04-07 19:41:13 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/weixin_58276266/article/details/118394965

版权

promise 是一个异步调用的变成方案(方法),它提供了一些API的使用,从而实现了异步调用的方式 , 避免了层层嵌套的问题

层层嵌套的弊端:如果中间一个程序出现问题那么整个程序就无法执行 ;

通过promise的方式解决原始ajax层层嵌套的问题(原始是使用闭包解决)

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。。const 声明一个只读的常量，一旦声明，常量的值就不能改变。

使用对象的条件器和使用参数条件器的区别

参数条件器

对象的条件器

在这里插入图片描述

axios

作用 : 实现ajax异步调用的一种方式

axios封装了promise实现了ajax的异步调用 , 且在vue中主流axios实现前后端调用

报这个错误有两个原因:1)没有跨域的问题 2)后端没有接收

axios是代码结构

axios.请求类型(“url的请求地址值”)
.then(result=>{
console.log(result.data)
})

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		<h1>Axios远程调用练习</h1>
		
		<script src="../js/axios.js"></script>
		<script>
			/* 
				1.promise对象解决传统ajax中的回调地狱问题.
				2.Axios封装了promise对象,异步调用更加简洁
				3.常见请求类型 1.get(查) 2.post(form表单) 
							  3.put(改) 4.delete(删除)
				4.分组: 用法相同 get/delete   post/put
				注意事项: 默认条件下通过浏览器只能发起Get请求!!!!
			 */
			
			/* 1.Axios入门案例-get请求 
			   原始方式:   参数: 1.url地址  2.请求参数   3.回调函数
			   axios方式: 参数:  1.url地址  2.请求参数 
						  关键字: then(回调函数)
			*/
			axios.get("http://localhost:8090/findAll")
				 .then(function(result){
					 //result返回值是一个promise对象.
					 console.log(result)
					 //动态获取服务器返回值使用result.data的方式  在F12时所查询的数据在data中
					 console.log(result.data)
				 })
			
			//2.箭头函数写法 参数只有一个可以省略括号
			axios.get("http://localhost:8090/findAll")
				 .then(result => {
					 console.log(result.data)
				 })
		    /**
			 * 3.GET带参数的请求方式1---字符串拼接
			 * 需求: 查询ID=1的用户数据
			 * url: http://localhost:8090/getUserById?id=1
			 */
			axios.get("http://localhost:8090/getUserById?id=1")
				 .then(result => {
					 console.log(result.data)
				 })
			/**
			 * 根据对象查询数据库
			 * 需求:根据name="大乔" sex="女"的条件查询数据库.
			 * URL: http://localhost:8090/getUserByNS
			 */
			//1.封装对象
			let user = {
				name: '大乔',
				sex: '女'
			}
			axios.get("http://localhost:8090/getUserByNS",{
				params: user //关键字params
			}).then(result => {
				console.log(result.data)
			})
			/**
			 * 要求: 利用restFul风格 查询name中包含"君"的数据
			 * URL: http://localhost:8090/user/君  GET
			 */
			axios.get("http://localhost:8090/user/君")
				 .then(result => {
					 console.log(result.data)
				 })
			</script>
	</body>
</html>

箭头函数

语法: 将function 省略,利用=> 符号代替

在这里插入图片描述

1.3 Axios 的字符串拼接

说明: 将用户的请求数据通过字符串拼接实现数据传递.
例如: “http://localhost:8090/getUserById?id=1”

在这里插入图片描述

1.3.1.2 编辑后端Controller

注意事项:
1.请求类型必须与Ajax的类型匹配与普通的方式一样
2.参数动态接收(使用id , 对象等不是使用某个数字 ,或某个值)

后端的参数和url的参数要进行对应或使用对象也可以

在这里插入图片描述

编辑后端Service

根据ID查询数据库

在这里插入图片描述

对象请求方式(重点)

需求

如果Ajax请求的参数有多个,如果采用字符串拼接的方式.导致效率太低.结构复杂.所以需要采用对象的方式实现数据的提交.

** 对象方式提交**
需求: 根据name=“大乔” sex="女"的条件查询数据库.

在这里插入图片描述

编辑UserController(使用对象的方式)

在这里插入图片描述

编辑UserService(使用对象的方式)

在这里插入图片描述

编辑usermapper(通用)

在这里插入图片描述

问题url的参数给后端的参数机械能赋值

原理:
1.当用户调用该方法时.则该方法开始运行.则实例化一个空对象 User对象.
2.当用户传递数据时. ?name=xxxx&sex=xxx
3.调用对象的setName方法为对象的属性赋值. 同理 setSex方法为属性赋值. (SpringMVC实现)

在这里插入图片描述

RestFul结构

语法说明

说明: RestFul的风格主要的目的是简化Get请求的方式. 将原有的url中的&和?.改为使用"/" 的方式进行参数传递.
例子:
1.get请求类型 http://localhost:8090/getUser?name=“大乔”&age=18
2.restFul请求类型 http://localhost:8090/user/大乔/18 请求类型: XXX

注意事项:

1.利用restFul可以简化用户get请求的类型.
2.编辑restFul请求时应该采用**无状态(请求中不能出现动词 , 就是状态类型不能再URL中出现)**的请求名称
3.使用restFul时应该按照规范编辑请求的类型. GET(查) PUT(修改) POST(新增) DELETE(删除)

/**
			 * 要求: 利用restFul风格 查询name中包含"君"的数据
			 * URL: http://localhost:8090/user/君  GET
			 */
			axios.get("http://localhost:8090/user/君")
				 .then(result => {
					 console.log(result.data)
				 })

restful的后端的区别

url只有一个参数
在这里插入图片描述

url中有多个参数则使用对象的方式进行接收

在这里插入图片描述

编辑service

对象的方式

在这里插入图片描述

简单参数的方式

在这里插入图片描述

Axios-delete请求(使用params的方式)

1.6.1 对象方式删除
1.6.1.1 编辑页面JS

使用params的方式必须先定义一个参数

在这里插入图片描述


<script src="../js/axios.js"></script>
		<script>
			/* GET请求的方式 与Delete请求的方式一致 */
			//1.删除name="xxxx"的数据 使用params 对象的方式实现
			let user = {
				name: "星期五"
			}
			axios.delete("http://localhost:8090/deleteUserByName",{
				params: user
			}).then(result => {
				console.log(result.data)
			})
		
		</script>

编辑UserController

在这里插入图片描述

编辑UserService

在这里插入图片描述

restFul风格删除数据

注意: 删除是没有返回值类型,

编辑页面JS

在这里插入图片描述

业务层Service方法,调用上一个案例即可.

银河系的一束光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise使用ajax前后端调用的高级用法

promise 是一个异步调用的变成方案(方法),它提供了一些API的使用,从而实现了异步调用的方式 , 避免了层层嵌套的问题层层嵌套的弊端:如果中间一个程序出现问题那么整个程序就无法执行 ;通过promise的方式解决原始ajax层层嵌套的问题(原始是使用闭包解决)let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。。const 声明一个只读的常量，一旦声明，常量的值就不能改变。使用对象的条件器和使用参数条件器的区别参数条件器对象的条件器axios作用
复制链接

扫一扫