Network中XHR与JS的区别

Network中XHR与JS的区别是，XHR主要作用是用于筛选所有的XHR类型的请求，达到只看XHR类型请求的目的，XHR代表当前页面执行的时候网络请求，JS代表当前页面所加载的JS文件。

一、Network中XHR与JS的区别

XHR主要作用是用于筛选所有的XHR类型的请求，达到只看XHR类型请求的目的，XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中，XHR类型即通过XMLHttpRequest方法发送的请求。

XMLHttpRequest（XHR）是一个构造函数，对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL。即允许网页在不影响用户操作的情况下，更新页面的局部内容。可以用于获取任何类型的数据。

对文件类型的过滤，XHR代表当前页面执行的时候网络请求，JS代表当前页面所加载的JS文件。

XHR与JS简单的说就是 content-type 的区别：

xhr 是 application/json

js 是 application/javascript

延伸阅读：

二、fetch

fetch的一些问题

fetch是原生js方法，没有使用XMLHttpRequest对象，使用fetch可以不用引用http的类库即可实现。提供了一种简单，合理的方式来跨网络异步获取资源。

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})

3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费

4）fetch没有办法用原生监测异步请求，而XHR可以

fetch同构方便，使用isomorphic-fetch

.fetch 不管请求处理成功还是失败，都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

fetch与XMLHttpRequest的区别

fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。

fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。

fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

以上就是关于Network中XHR与JS的区别的内容希望对大家有帮助。