javascript-前后端交互-Promise

最新推荐文章于 2023-03-02 16:07:50 发布

gaog2zh

最新推荐文章于 2023-03-02 16:07:50 发布

阅读量386

点赞数

分类专栏： # javascirpt 文章标签： javascript 前后端交互

本文链接：https://blog.csdn.net/gaogzhen/article/details/107598003

版权

javascirpt 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javascript-前后端交互-Promise

文章目录

1、Promise基本用法
- 1.1、步骤
- 1.2、示例
2、基于Promise处理Ajax请求
- 2.1、处理原生Ajax
- 2.2、发送多次ajax请求
3、then参数中的函数返回值
- 3.1、返回Promise示例对象
- 3.2、返回普通值
3、Promise常用API

内容

1、Promise基本用法

1.1、步骤

实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
resolve和reject两个参数处理成功和失败2种情况，并通过.then获取处理结果

1.2、示例

代码1.2-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  </head>
  <body>
  	<script>
  		let p = new Promise(function (resolve, reject) {
  			setTimeout(() => {
  				let flag = false
  				if (flag) {
  					resolve('hello')
  				} else {
  					reject('出错了')
  				}
  			}, 200);
  		})
  		p.then(function (data) {
  			console.log(data);  
  		},function (err) {
  			console.log(err);
  		})
  	</script>
  </body>
  </html>

结果：
- flag = false 等待0.2s，输出：出错了
- flag = true 等待0.2s,输出：hello

2、基于Promise处理Ajax请求

2.1、处理原生Ajax

启动后台：同上一篇博文’javascript-前后端交互-异步调用Ajax与Promise比较’，不在赘述

前端页面代码2-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>基于Promise处理Ajax</title>
  </head>
  <body>
  	<script>
  		function queryData(url) {
  			const p = new Promise(function (resolve, reject) {
  				const xhr = new XMLHttpRequest();
  				xhr.onreadystatechange = function () {
  					if (xhr.readyState !== 4) return
  					if (xhr.readyState === 4 && xhr.status == 200) {
  						// 处理正常的情况
  						resolve(xhr.responseText)
  					} else {
  						reject('未能获取数据')
  					}
  				}
  				xhr.open('get', url)
  				xhr.send(null)
  			})
  			return p
  		}

  		queryData('http://localhost:3000/data')
  			.then(function (data) {
  				console.log(data);
  			}, function (err) {
  				console.log(err);
  			})
  	</script>
  </body>
  </html>

结果：
- 正常，输出：Hello,World!
- 异常，输出：未能获取数据

2.2、发送多次ajax请求

模拟多次请求结果存在依赖关系。

后台同上，前端页面代码2.2-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>多次发送ajax</title>
  </head>
  <body>
  	<script>

  		function queryData(url) {
  			const p = new Promise(function (resolve, reject) {
  				const xhr = new XMLHttpRequest();
  				xhr.onreadystatechange = function () {
  					if (xhr.readyState !== 4) return
  					if (xhr.readyState === 4 && xhr.status == 200) {
  						// 处理正常的情况
  						resolve(xhr.responseText)
  					} else {
  						reject('未能获取数据')
  					}
  				}
  				xhr.open('get', url)
  				xhr.send(null)
  			})
  			return p
  		}
  		let url1 = 'http://localhost:3000/data'
  		let url2 = 'http://localhost:3000/data1'
  		let url3 = 'http://localhost:3000/data2'
  		queryData(url1)
  			.then(function (data) {
  				console.log(data);
  				return queryData(url2)
  			})
  			.then(function (data) {
  				console.log(data);
  				return queryData(url3)
  			})
  			.then(function (data) {
  				console.log(data);
  			})
  	</script>
  </body>
  </html>

结果：

  Hello World!
  Hello data1!
  Hello data2!

3、then参数中的函数返回值

3.1、返回Promise示例对象

返回的实例对象会调用下一个then

3.2、返回普通值

返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
那么这个then是谁调用的呢？
- 答案是生成的默认的Promise对象，保证链式操作

3、Promise常用API

3.1、实例用法

p.then():得到异步任务的正确结果
p.catch():得到异步处理的错误结果
p.finally():不管异步任务的结果如何，都会执行

前端示例代码3.1-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  </head>
  <body>
  	<script>
  		// 异步任务
  		function instanceAPI() {
  		   return new Promise(function (resolve, reject) {
  				setTimeout(() => {
  					let flag = true
  					if (flag) {
  						resolve('hello')
  					} else {
  						reject('出错了')
  					}
  				}, 200);
  			})
  		}

  		instanceAPI()
  			.then(function (data) {
  				console.log(data);  
  			})
  			.catch(function (err) {
  				console.log(err);
  			})
  			.finally(function () {
  				console.log('任务结束');
  			})
  	</script>
  </body>
  </html>

结果：

flag=true:
```
  hello
  任务结束
```
flag=false
```
  出错了
  任务结束
```

3.2、对象方法

Promise().all():并发处理多个异步任务，所有任务执行完成才能得到结果
Promise().race():并发处理多个异步任务，只要有一个任务完成就能得到结果

示例代码3.2-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>多次发送ajax</title>
  </head>
  <body>
  	<script>

  		function queryData(url) {
  			const p = new Promise(function (resolve, reject) {
  				const xhr = new XMLHttpRequest();
  				xhr.onreadystatechange = function () {
  					if (xhr.readyState !== 4) return
  					if (xhr.readyState === 4 && xhr.status == 200) {
  						// 处理正常的情况
  						resolve(xhr.responseText)
  					} else {
  						reject('未能获取数据')
  					}
  				}
  				xhr.open('get', url)
  				xhr.send(null)
  			})
  			return p
  		}
  		let url1 = 'http://localhost:3000/data'
  		let url2 = 'http://localhost:3000/data1'
  		let url3 = 'http://localhost:3000/data2'
  		let p1 = queryData(url1)
  		let p2 = queryData(url2)
  		let p3 = queryData(url3)
  		Promise.all([p1, p2, p3])
  			.then(ret => {
  				console.log(ret);
  			})

  		Promise.race([p1, p2, p3])
  			.then(ret => {
  				console.log(ret);
  			})
  	</script>
  </body>
  </html>

结果：

  // all
  ["Hello World!", "Hello data1", "Hello data2"]
  // race
  Hello World!

后记：

本项目为参考某马视频全栈开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript-前后端交互-Promise

javascript-前后端交互-Promise目录文章目录1、Promise基本用法1.1、步骤1.2、示例2、基于Promise处理Ajax请求2.1、处理原生Ajax2.2、发送多次ajax请求3、then参数中的函数返回值3.1、返回Promise示例对象3.2、返回普通值3、Promise常用API3.1、实例用法3.2、对象方法***后记*** ：内容1、Promise基本用法1.1、步骤实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务resolve
复制链接

扫一扫