Promise控制ajax异步，将异步操作队列化

最新推荐文章于 2024-12-04 12:27:44 发布

邓邓邓邓邓邓

最新推荐文章于 2024-12-04 12:27:44 发布

阅读量384

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38830589/article/details/101679723

版权

本文探讨如何使用Promise来控制AJAX异步请求，实现操作队列化，确保按照期望顺序执行并返回正确结果。通过resolve和reject处理异步数据，结合.then和.catch进行异常捕获，例如先获取所有省份信息，接着获取对应省份的城市信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax 异步

async javascript and xml（json）

异步的 javascript 和 xml
用于浏览器和后台服务进行异步交互（传递信息）
ajax 操作为异步操作，即操作是同时进行的，无法得知操作完成的先后顺序。

Promise

Promise 方法可以控制 ajax 异步，将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。

Promise 方法通过 resolve 返回处理成功的数据， reject 则返回处理失败的数据
当数据处理成功，.then 方法控制接下来要执行的函数
当数据处理失败，.catch 方法捕获异常，返回错误

以下代码为 Promise 的一个简单应用，先查询所有的省份信息，再根据省份去查询所有的城市信息。

// 初始化省份数据
function initData(){
	var url = baseURL+"/Province/findAll";
	// 控制ajax执行的顺序,将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
    var promise = new Promise(function(resolve,reject) {
    	$.get(url,function(response){
			$(".province_tbl").empty();
			if(response.data) {
				resolve(response.data); // 如果有数据，通过数据，数据处理成功
				response.data.map(function(item,index){
					var newDiv = $(`
						<div class="tbl_header bg-dark">`+item.name+`</div>
						<div class="body province`+item.id+`">
							<div class="addspan">

							</div>
							<a href="javascript:void(0)">添加</a>
						</div>
					`);
					$('.province_tbl').append(newDiv);
				})
			} else {
				reject("请求数据为空!") // 没有数据，数据处理失败
			}
		
		})
    })
    // 回调函数，当resolve通过了数据，执行此函数
    .then(function(data) { // data接收resolve(response.data)通过的数据
    	// 查询城市数据
       	$.get(baseURL+"/City/findAll",function(res) {
       		// 每遍历一次res.data，都要遍历一次response.data
       	   	res.data.map(function(item,index) {
              	for(var key in data) {
              		// 1.遍历res.data
              		// 2.遍历response.data
              		// 3.比较：如果response.data的省份id，等于当前城市的省份id，则将当前城市追加到该省份中
              	  	if(data[key].id === item.provinceId) {
                  	  	var newSpan = $(`
							<span>`+item.name+`</span>
                  	  	`)
                  	  	$(".province"+data[key].id+" .addspan").append(newSpan);
              	  	}
              	}
       	   	})
       	})
    })
    // 当reject发生，捕获异常，返回错误
    .catch(function(error){
    	return error;
    })
}