F12 网络请求类型：Fetch与XHR的区别

引言

在Web开发中，浏览器的F12开发者工具是调试网络请求的重要工具。通过F12，我们可以查看各种类型的网络请求，包括fetch和XMLHttpRequest（XHR）。这两种技术都用于在浏览器中发起网络请求，但它们之间存在一些关键的差异。

基础知识

F12开发者工具：大多数现代浏览器都提供了开发者工具，可以通过按F12键或右键点击页面元素选择“检查”来打开。它允许开发者查看网络请求、调试JavaScript、编辑CSS等。

Fetch API

定义：Fetch API是一个现代的、基于Promise的网络请求接口，用于替代XMLHttpRequest。
特点：
- 基于Promise，使得异步请求更加容易管理和编写。
- 提供了更灵活的请求和响应处理方式。
- 支持最新的Web标准，如CORS（跨源资源共享）。

XMLHttpRequest (XHR)

定义：XHR是一个较旧的API，用于在浏览器中发起网络请求。它是Fetch API出现之前的标准。
特点：
- 基于事件的模型，使用onreadystatechange事件处理请求状态变化。
- 请求和响应处理较为复杂，需要手动设置请求头和解析响应。
- 兼容性好，支持较旧的浏览器。

示例演示

Fetch API请求示例：

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

XMLHttpRequest请求示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(JSON.parse(xhr.responseText));}
};
xhr.send();

实际应用

Fetch API：适用于需要处理JSON数据、支持Promise的场景，以及现代Web应用开发。
XMLHttpRequest：适用于需要兼容旧浏览器的场景，或者在Fetch API不可用时作为备选方案。

深入与最佳实践

Fetch API：
- 支持流式传输，可以处理大文件上传和下载。
- 可以取消请求，适合处理复杂的用户交互。
XMLHttpRequest：
- 对于简单的请求，XHR可能更简单直接。
- 由于是基于事件的，可能在某些情况下更易于理解和使用。

Fetch API 深入探讨

跨域请求：Fetch支持CORS，可以简化跨域请求的处理。使用fetch发起跨域请求时，浏览器会自动携带CORS相关的头信息。

fetch('https://api.example.com/data', {headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch Error:', error));

请求超时：Fetch本身不支持超时设置，但可以通过AbortController实现。

const controller = new AbortController();
const signal = controller.signal;fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {if (error.name === 'AbortError') {console.log('Fetch aborted');} else {console.error('Fetch Error:', error);}
});// 设置超时
setTimeout(() => controller.abort(), 5000); // 5秒后中止请求

XMLHttpRequest (XHR) 深入探讨

进度事件：XHR允许监听progress事件来跟踪文件上传或下载的进度。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/largefile');xhr.onprogress = function(event) {if (event.lengthComputable) {console.log(`Received ${event.loaded} of ${event.total} bytes`);}
};xhr.onload = function() {if (xhr.status === 200) {console.log('File received:', xhr.responseText);}
};xhr.send();

同步请求：XHR支持同步请求，但出于性能考虑，通常不推荐使用。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', false); // 第三个参数为false表示同步请求
xhr.send();if (xhr.status === 200) {console.log('Data:', xhr.responseText);
} else {console.error('Request failed:', xhr.status);
}

最佳实践

错误处理：无论是使用Fetch还是XHR，始终要有健壮的错误处理机制。

// Fetch错误处理
fetch('https://api.example.com/data')
.then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));// XHR错误处理
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onerror = function() {console.error('Request error...');
};
xhr.send();

安全措施：使用HTTPS协议，确保数据传输的安全性。

请求头设置：根据需要设置适当的请求头，如认证令牌、内容类型等。

// Fetch设置请求头
fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token_here'},body: JSON.stringify({ key: 'value' })
});// XHR设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your_token_here');