• 首页
        • 更多产品

          客户为中心的产品管理工具

          专业的软件研发项目管理工具

          简单易用的团队知识库管理

          可量化的研发效能度量工具

          测试用例维护与计划执行

          以团队为中心的协作沟通

          研发工作流自动化工具

          账号认证与安全管理工具

          Why PingCode
          为什么选择 PingCode ?

          6000+企业信赖之选,为研发团队降本增效

        • 行业解决方案
          先进制造(即将上线)
        • 解决方案1
        • 解决方案2
  • Jira替代方案
目录

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的区别的内容希望对大家有帮助。

一站式研发项目管理平台 PingCode

一站式研发项目管理平台 PingCode

支持敏捷\瀑布、知识库、迭代计划&跟踪、需求、缺陷、测试管理,同时满足非研发团队的流程规划、项目管理和在线办公需要。

相关文章