乐闻世界logo
搜索文章和话题

如何基于 Promise.all 实现Ajax请求的串行和并行?

浏览18
6月24日 16:43

Ajax请求的串行实现

对于串行执行多个Ajax请求,我们通常需要确保一个请求完全完成后,再执行下一个请求。这可以通过链式调用then方法来实现,也就是在每个Promise对象的then方法中启动下一个Ajax请求。

javascript
function ajaxRequest(url) { return new Promise((resolve, reject) => { // 这里是Ajax请求的代码,成功时调用resolve,失败时调用reject const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => resolve(xhr.responseText); xhr.onerror = () => reject(xhr.statusText); xhr.send(); }); } const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要串行处理 let promiseChain = Promise.resolve(); // 初始化一个已完成的Promise urls.forEach(url => { promiseChain = promiseChain.then(() => ajaxRequest(url)).then(response => { console.log('请求完成:', response); // 这里可以处理每个请求的响应 }); }); // 最后可以在所有请求都完成后执行一些操作 promiseChain.then(() => { console.log('所有请求都已串行完成。'); });

在这个例子中,每个请求仅在前一个请求的then方法中被调用,这确保了请求的串行执行。

Ajax请求的并行实现

要并行执行多个Ajax请求,可以使用Promise.all方法。Promise.all接收一个Promise对象数组,等待所有的Promise对象都成功完成后,它将返回一个新的Promise,这个新Promise将解析为一个结果数组,数组中的每个结果对应于原Promise数组中的每个请求。

javascript
function ajaxRequest(url) { return new Promise((resolve, reject) => { // 这里是Ajax请求的代码,成功时调用resolve,失败时调用reject const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => resolve(xhr.responseText); xhr.onerror = () => reject(xhr.statusText); xhr.send(); }); } const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要并行处理 const promises = urls.map(ajaxRequest); // 创建一个包含所有请求的Promise数组 Promise.all(promises).then(responses => { console.log('所有请求都已并行完成。'); responses.forEach(response => { console.log('请求完成:', response); // 这里可以处理每个请求的响应 }); }).catch(error => { // 如果任何一个请求失败,这里会捕获到错误 console.error('请求失败:', error); });

在这个例子中,Promise.all并行地处理所有的Ajax请求,并在所有请求成功完成后,按照请求的顺序输出响应结果。如果任何一个请求失败,Promise.all会立即拒绝,并返回第一个遇到的错误。

这两种方法是处理多个Ajax请求时常用的串行和并行模式。根据实际需求选择合适的方式。在实际面试中,可以根据面试官的要求提供更详细的代码实例或解释。

标签:前端ES6Promise