Vue.js 学习笔记十四：Promise 之链式调用

最新推荐文章于 2024-07-28 12:05:01 发布

stary1993

最新推荐文章于 2024-07-28 12:05:01 发布

阅读量1.3k

点赞数 2

分类专栏： Vue.js 学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_27875933/article/details/119169155

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

Promise 链式调用

实际开发中，我们经常需要同时请求多个接口。比如说：在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口2，获取data2；然后根据data2的数据，继续请求接口3。

这种场景其实就是接口的多层嵌套调用。有了 promise 之后，我们可以把多层嵌套调用按照线性的方式进行书写，非常优雅。

也就是说，Promise 可以把原本的多层嵌套调用改进为链式调用。

代码举例：（多次 Ajax请求，链式调用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
		    基于Promise发送Ajax请求
		  */
			const queryData = url => {
				let promise = new Promise((resolve, reject) => {
					let xhr = new XMLHttpRequest()
					xhr.onreadystatechange = () => {
						if (xhr.readyState != 4) return;
						if (xhr.readyState == 4 && xhr.status == 200) {
							// 处理正常情况
							resolve(xhr.responseText); // xhr.responseText 是从接口拿到的数据
						} else {
							// 处理异常情况
							reject('接口请求失败')
						}
					};
					xhr.responseType = 'json' // 设置返回的数据类型
					xhr.open('get', url);
					xhr.send(null); // 请求接口
				})
				return promise;
			}
			// 发送多个ajax请求并且保证顺序
			queryData('http://localhost:8000/api1')
				.then(
					data1 => {
						console.log(JSON.stringify(data1))
						// 请求完接口1后，继续请求接口2
						return queryData('http://localhost:8000/api2')
					},
					error1 => {
						console.log(error1)
					}
				)
				.then(
					data2 => {
						console.log(JSON.stringify(data2))
						// 请求完接口2后，继续请求接口3
						return queryData('http://localhost:8000/api3')
					},
					error2 => {
						console.log(error2)
					}
				)
				.then(
					data3 => {
						// 获取接口3返回的数据
						console.log(JSON.stringify(data3))
					},
					error3 => {
						console.log(error3)
					}
				)
		</script>
	</body>
</html>

stary1993

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 学习笔记十四：Promise 之链式调用

目录Promise 链式调用Promise 链式调用实际开发中，我们经常需要同时请求多个接口。比如说：在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口2，获取data2；然后根据data2的数据，继续请求接口3。这种场景其实就是接口的多层嵌套调用。有了 promise 之后，我们可以把多层嵌套调用按照线性的方式进行书写，非常优雅。也就是说，Promise 可以把原本的多层嵌套调用改进为链式调用。代码举例：（多次 Ajax请求，链式调用）<!DOC
复制链接

扫一扫