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

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请求时常用的串行和并行模式。根据实际需求选择合适的方式。在实际面试中，可以根据面试官的要求提供更详细的代码实例或解释。