fetch和xhr
两者都是获得服务端数据的方式，相对于xhr，fetch是一种原生的js方法，可以不引用http的类库就可以实现，而xhr是一个构造函数，需要创建一个实例对象来用于与服务交互请求数据。
- fetch
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
if (!response.ok) { // 检查是否请求成功
throw new Error('Network response was not ok');
}
return response.json(); // 返回 JSON 数据
})
.then(data => console.log(data)) // 输出 JSON 数据
.catch(error => console.error(error)); // 处理异常情况
- xhr
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.onload = () => {
if (xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
console.log(users);
}
};
xhr.send();
虽然fetch可以用promise api来实现请求，xhr采用的是回调函数，相比之下xhr更加繁琐，但我们平时开发中主要用的请求都掉用了其他方的库axios等等
除了以上的差别，fetch和xhr也存在一些不同，fetch相对于xhr，它的报错只对网络请求报错，也就是当网络故障或者请求发送失败，跨域等等问题才会触发promise的reject，但我们可以通过response对象的ok来判断请求是否成功获取。以下是response的一些属性值：
除此之外，fetch和xhr还存在一些区别，例如：
- 同时在面对一些超时的请求，fetch不支持abort，不支持超时控制，因此在面对一些请求会造成流量丢失。
- fetch不会自动携带cookie,需要添加配置项才可以携带。
- fetch无法使用原生检测异步请求 除了这些可能还存在其他不同点，希望大家补充。
