Vue.js 学习笔记十四：Promise 之 return 的函数返回值

程序员文章站 2022-03-29 14:40:29

...

return 后面的返回值，有两种情况：

返回 Promise 实例对象。返回的该实例对象会调用下一个 then。
返回普通值。返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值。

返回 Promise 实例对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回 Promise 实例对象</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))
						// 这里的 return，返回的是 Promise 实例对象
						return new Promise((resolve, reject) => {
                            resolve('hello world')
                        })
					},
					error2 => {
						console.log(error2)
					}
				)
				.then(
					data3 => {
						// 获取接口3返回的数据
						console.log(JSON.stringify(data3))
					},
					error3 => {
						console.log(error3)
					}
				)
		</script>
	</body>
</html>

返回普通值

<!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))
						// 这里的 return，返回的是 普通值
						return ‘hello world’
                        })
					},
					error2 => {
						console.log(error2)
					}
				)
				 /*
                    既然上方返回的是 普通值，那么，这里的 then 是谁来调用呢？
                    答案是：这里会产生一个新的 默认的 promise实例，来调用这里的then，确保可以继续进行链式操作。
                */
				.then(
					data3 => {
						// 这里的 data3 接收的是 普通值 'hello world'
						console.log(JSON.stringify(data3))
					},
					error3 => {
						console.log(error3)
					}
				)
		</script>
	</body>
</html>