面试题：JavaScript中AJAX的错误处理与优化

处理 AJAX 错误

使用 try - catch 块：在使用 XMLHttpRequest 对象时，可以将相关代码包裹在 try - catch 块中，捕获可能出现的异常。例如：

try {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'your - url', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 成功处理
                const response = JSON.parse(xhr.responseText);
                console.log(response);
            } else {
                // 服务器错误处理
                console.error('服务器错误:', xhr.status, xhr.statusText);
            }
        }
    };
    xhr.send();
} catch (error) {
    // 网络等其他错误处理
    console.error('网络或其他错误:', error);
}

Promise 的 catch 方法：如果使用 fetch API（基于 Promise），可以利用 catch 方法捕获错误。例如：

fetch('your - url')
  .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error:'+ response.status);
        }
        return response.json();
    })
  .then(data => {
        console.log(data);
    })
  .catch(error => {
        console.error('请求错误:', error);
    });

XMLHttpRequest 的 error 事件：对于 XMLHttpRequest，还可以监听 error 事件来处理网络错误。例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your - url', true);
xhr.onerror = function () {
    console.error('网络错误');
};
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            const response = JSON.parse(xhr.responseText);
            console.log(response);
        } else {
            console.error('服务器错误:', xhr.status, xhr.statusText);
        }
    }
};
xhr.send();

优化 AJAX 请求性能

处理并发请求：
- 控制并发数量：使用 Promise.allSettled 或 Promise.race 等方法。例如，如果有多个请求，但不想同时发送过多请求导致性能问题，可以使用队列控制并发数量。

function sendRequests(requests, maxConcurrent) {
    return new Promise((resolve, reject) => {
        let completed = 0;
        const results = [];
        const queue = requests.slice();
        function sendNext() {
            if (queue.length === 0 && completed === requests.length) {
                resolve(results);
            } else if (queue.length > 0 && (requests.length - completed) >= maxConcurrent) {
                const request = queue.shift();
                request()
                  .then(result => {
                        results.push(result);
                        completed++;
                        sendNext();
                    })
                  .catch(error => {
                        reject(error);
                    });
            } else {
                const request = queue.shift();
                request()
                  .then(result => {
                        results.push(result);
                        completed++;
                        sendNext();
                    })
                  .catch(error => {
                        reject(error);
                    });
            }
        }
        sendNext();
    });
}
// 使用示例
const requests = [
    () => fetch('url1').then(res => res.json()),
    () => fetch('url2').then(res => res.json()),
    () => fetch('url3').then(res => res.json())
];
sendRequests(requests, 2).then(results => {
    console.log(results);
}).catch(error => {
    console.error(error);
});

- **取消不必要的请求**：在某些情况下，如果用户操作导致之前的请求不再需要，可以使用 `AbortController` 来取消请求。例如：

const controller = new AbortController();
const signal = controller.signal;
fetch('your - url', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
        if (error.name === 'AbortError') {
            console.log('请求已取消');
        } else {
            console.error('请求错误:', error);
        }
    });
// 取消请求
controller.abort();

缓存控制：
- 使用浏览器缓存：设置合适的 HTTP 缓存头（如 Cache - Control、Expires 等）。在服务器端配置响应头，例如在 Node.js 中使用 Express：

const express = require('express');
const app = express();
app.get('/data', (req, res) => {
    res.set('Cache - Control','public, max - age = 3600'); // 缓存 1 小时
    res.send('缓存的数据');
});
const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

- **客户端缓存**：在 JavaScript 中，可以手动实现简单的缓存机制。例如：

const cache = {};
async function getData(url) {
    if (cache[url]) {
        return cache[url];
    }
    const response = await fetch(url);
    const data = await response.json();
    cache[url] = data;
    return data;
}
// 使用示例
getData('your - url').then(data => console.log(data));

星途面试题库

面试题：JavaScript中AJAX的错误处理与优化

知识考点

面试题答案

处理 AJAX 错误

优化 AJAX 请求性能