在Web开发中，Ajax请求是常见的与服务器进行异步通信的方式。然而，有时候我们可能需要终止正在进行的Ajax请求，特别是在用户刷新页面或者导航到其他页面时。以下是如何在刷新页面时轻松终止正在进行的Ajax请求的方法。

1. 使用AbortController

现代浏览器提供了一个名为AbortController的API，可以用来控制网络请求的终止。以下是使用AbortController终止Ajax请求的步骤：

1.1 创建AbortController实例

const controller = new AbortController(); const { signal } = controller; 

1.2 发送Ajax请求

使用fetch或XMLHttpRequest发送请求，并将signal属性传递给请求。

fetch(url, { signal }) .then(response => { // 处理响应 }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Fetch error:', error); } }); 

1.3 终止请求

当需要终止请求时，调用controller.abort()方法。

// 在页面刷新或导航到其他页面时调用 controller.abort(); 

2. 监听页面卸载事件

在页面卸载时，可以监听window对象的unload事件来终止Ajax请求。

window.addEventListener('unload', () => { controller.abort(); }); 

3. 使用XMLHttpRequest

对于使用XMLHttpRequest的情况，可以通过监听XMLHttpRequest对象的abort方法来终止请求。

3.1 创建XMLHttpRequest对象

const xhr = new XMLHttpRequest(); 

3.2 配置请求

xhr.open('GET', url); xhr.signal = controller.signal; 

3.3 发送请求

xhr.send(); 

3.4 终止请求

// 在页面刷新或导航到其他页面时调用 xhr.abort(); 

4. 示例代码

以下是使用AbortController和fetch的完整示例代码：

document.addEventListener('DOMContentLoaded', () => { const controller = new AbortController(); const { signal } = controller; const fetchButton = document.getElementById('fetch-button'); fetchButton.addEventListener('click', () => { fetch('https://api.example.com/data', { signal }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Fetch error:', error); } }); }); window.addEventListener('unload', () => { controller.abort(); }); }); 

通过以上方法，可以在刷新页面时轻松终止正在进行的Ajax请求，避免不必要的资源浪费和潜在的错误。