[JS] Promise Array 实现ajax 顺序执行

[JS] Promise Array 实现ajax 顺序执行

ES6的Promise 可以有效的解决链式AJAX调用问题,自然顺序执行一个Promise Array也是完全行得通的.
文中示例的业务场景不常存在,但是核心方法浅显易懂,我们可以很容易的扩展到其他可以用的到的地方.


//Promise Array执行,核心方法
//array 是预定义的Promise数组
function doPromiseArray(array){
	let sequence = Promise.resolve();
        array.forEach(function (item) {
        	**// 此处的item 就是 return new promise.....**
            sequence = sequence.then(item);
        });
      return sequence;
}


//示例业务场景,(部分代码只是模拟的)
function  batchReflesh(){
		//请求次数
		let times = 10;
        let array = [];
        for (let i = 0; i < times; i++) {
        	//比如刷新表格的第1行到100行某几个字段,但是分10次请求每次刷新10行
        	//实际例子来源于一个后台管理系统,页面表格有最大有1000条数据
        	//但是调用的接口每次最大支持200,所以做成了队列分5次请求
        	//相同的url,但是参数不一致,根据需求包装自己的参数
        	let param = params[i];
        	//用预定义函数包装好的Promise ajax 请求,在真正需要的时候去调用它-(**这一点很关键**)
            **let p = function () {
                return new Promise(function (resolve, reject) {**
                    //
                    	$.ajax({
			                url: url,
			                type: "POST",
			                data: JSON.stringify(param),
			                success: function (rt) {
			                    if (rt.success && rt.data) {
			                    	//本次执行成功继续执行链
			                    	//todo
			                        resolve();
			                    } else {
			                   		 //本次执行失败停止执行链
			                        reject(rt.message);
			                    }
			                },
			                error: function (jqXHR, textStatus, errorThrown) {
			                	//本次执行失败停止执行链
			                    reject(textStatus);
			                }
			            });
                    //
                });
            }
            //promise 放入数组中
            array.push(p);
        }
        //执行Promise ajax 请求,有异常就停止这里不关心具体的异常信息,所以没有catch
        doPromiseArray(array);
}

ps: 这是个人笔记
Promise 文档 说明

### 如何确保 Ajax 请求按顺序执行 为了确保多个 Ajax 请求按照特定的顺序依次执行,可以采用多种方法实现这一目标。以下是几种常见的解决方案及其适用场景。 #### 方法一:通过 `async: false` 设置同步请求 可以通过将每个 Ajax 请求中的 `async` 属性设置为 `false` 来强制其以同步方式运行[^1]。这种方式简单直观,但在现代浏览器中已被废弃,因为它会阻塞主线程,影响用户体验。因此不推荐在实际项目中使用此方法。 ```javascript let ajax1 = $.ajax({ async: false, url: 'url1', dataType: 'json', type: 'post' }); let ajax2 = $.ajax({ async: false, url: 'url2', dataType: 'json', type: 'post' }); ``` --- #### 方法二:利用 Promise 链式调用 `.then()` Promise 是一种更现代化的方式,能够优雅地解决异步操作的顺序问题。通过链式调用 `.then()` 方法,可以让后续的请求依赖于前一个请求的结果[^2]。 ```javascript $.ajax({ url: 'url1', method: 'POST', dataType: 'json' }).then(function (dataFromFirstRequest) { console.log('第一个请求完成:', dataFromFirstRequest); return $.ajax({ url: 'url2', method: 'POST', dataType: 'json', data: { dependency: dataFromFirstRequest } }); }).then(function (dataFromSecondRequest) { console.log('第二个请求完成:', dataFromSecondRequest); // 继续下一个请求... }); ``` 这种方法不仅保持了代码的可读性和灵活性,还允许我们在每次请求完成后处理数据或将结果传递给下一次请求。 --- #### 方法三:基于数组和 `reduce` 的动态顺序控制 如果存在大量 Ajax 请求需要按序执行,则可以借助 JavaScript 的 `Array.prototype.reduce` 方法来构建动态的 Promise 链条[^3]。 ```javascript const urls = ['url1', 'url2', 'url3']; urls.reduce((promiseChain, currentUrl) => { return promiseChain.then(() => { return new Promise((resolve, reject) => { $.ajax({ url: currentUrl, method: 'POST', dataType: 'json' }).done(resolve).fail(reject); }); }); }, Promise.resolve()).then(() => { console.log('所有请求已完成'); }).catch(error => { console.error('某个请求失败:', error); }); ``` 上述代码片段展示了如何通过减少函数逐步累积 Promise 链表结构,从而达到逐次触发 Ajax 调用的效果。 --- #### 方法四:使用 Axios 库管理复杂流程 Axios 提供了一种更加简洁的方式来管理和串联多个 HTTP 请求。它原生支持 Promises 并提供了丰富的功能接口用于定制化需求。 ```javascript function makeSequentialRequests(urls) { const requests = []; let previousResponse; for (const url of urls) { requests.push( axios.post(url, { prevResult: previousResponse }) .then(response => { previousResponse = response.data; // 将当前响应保存下来作为下次输入参数之一 return response; }) ); if (requests.length > 0){ await requests[requests.length - 1]; // 等待上一步完成后再继续下一步 } } return Promise.all(requests); } makeSequentialRequests(['url1','url2']).then(results=>{ results.forEach(result=>console.log(`请求结果:${result}`)); }); ``` 尽管这里展示的是简化版逻辑,但足以说明如何运用 Axios 实现复杂的多阶段交互过程。 --- ### 总结 以上介绍了四种不同的技术手段用来保障 Ajax 请求之间的先后关系得以维持。其中最常用也是被广泛接受的做法便是依靠 ES6 中引入的标准——Promises 结合 `.then()` 或者第三方库如 Axios 进行编程实践。这些工具既保留了良好的性能表现又兼顾到了开发效率与维护成本等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值