对ajax的async属性的理解

最新推荐文章于 2021-07-13 23:22:24 发布

原创最新推荐文章于 2021-07-13 23:22:24 发布 · 置顶 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#代码事迹

ajax 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了在使用Ajax时遇到的一个问题：如何在异步请求中获取并使用响应数据。作者通过实例展示了由于Ajax的异步特性导致在外部无法获取到响应数据，并解释了解决方案——将async属性设置为false，使请求变为同步。然而，作者建议在实际开发中避免使用同步方式，因为它可能影响性能和用户体验。

昨天看到同事在写ajax时遇到一个问题：他想将一个ajax的响应数据在另一个ajax中作为请求数据使用，并且这两个ajax是独立的。但是在另一个ajax中却始终的不到前一个ajax响应的数据，具体值就是undefined，如下：

<!doctype html>
<html lang="">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/md5.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- <script src="js/es5-1.js" type="text/javascript" charset="utf-8"></script> -->
	</head>

	<body>
		<div class="ptxt">
		</div>
		<script>
			function xhr() {
				return $.ajax({
					type: 'post',
					//Cloud Studio测试接口，测试请自己写
					url: 'https://gpbtmn-8891-frqlxu.dev.ide.live',
					dataType: "json",
					/*headers: {
						'Content-Type': 'application/json;charsetcharset=utf-8'
					},*/
					data: {
						name: "lz",
						sex: "男",
						age: 25			
					},
					success: function(data) {
						/* console.log(2);
						console.log(data.info);
						$(".ptxt").text(data.info[0].date+data.info[0].blank+data.info[0].money) */
						// window.a=data[0].date + data.info[0].blank + data.info[0].money
					},
					error: function(err) {
						console.log(3);
						console.log(err)
					}
				});
			};
			console.log(xhr().responseJSON);
		</script>
	</body>
</html>

控制台打印
但是当打印xhr()时能看到数据的，如下：

既然请求成功为何在ajax之外拿不到数据呢？这和ajax的设计是有关的。Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），既然是异步的那么他和整个程序加载顺序是无关的，也就是ajax程序在整个程序中是不同步的，换句话说不按照从上到下运行程序，找到ajax的运行原理，就好解决问题了，即是，将异步设置为同步（async：false）如下：

<!doctype html>
<html lang="">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/md5.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- <script src="js/es5-1.js" type="text/javascript" charset="utf-8"></script> -->
	</head>

	<body>
		<div class="ptxt">
		</div>
		<script>
			function xhr() {
				return $.ajax({
					type: 'post',
					url: 'https://gpbtmn-8891-frqlxu.dev.ide.live',
					dataType: "json",
					/*headers: {
						'Content-Type': 'application/json;charsetcharset=utf-8'
					},*/
					data: {
						name: "李志",
						sex: "男",
						age: 25			
					},
					//async异步请求,在开发中最好不要将其设为false，也就是设为同步,因为这会影响性能以及用户体验
					async: false,
					success: function(data) {
						/* console.log(2);
						console.log(data.info);
						$(".ptxt").text(data.info[0].date+data.info[0].blank+data.info[0].money) */
						// window.a=data[0].date + data.info[0].blank + data.info[0].money
					},
					error: function(err) {
						console.log(3);
						console.log(err)
					}
				});
			};
			console.log(xhr().responseJSON);
		</script>
	</body>

</html>

控制台打印
问题成功解决。
其实在实际开发中最好不要将async设为false，也就是设为同步,因为这会影响性能以及用户体验。