Fetch/XHR和XHR的区别

Fetch和XHR都是用于在Web应用程序中发起HTTP请求的API，但它们之间有几个区别。

1. Fetch是一个新的API，而XHR是一个旧的API。Fetch是ES6中引入的，XHR是早期的XMLHttpRequest API。

2. Fetch的语法更简洁，易于使用。它返回一个Promise对象，可以使用.then()方法来处理响应。XHR需要设置回调函数来处理响应。

3. Fetch默认不接受或发送cookies。XHR默认情况下会发送和接收cookies。这可以通过配置Fetch的credentials选项来改变。

4. Fetch支持跨域请求，而XHR默认不支持跨域请求。这也可以通过设置XHR的withCredentials属性来实现。

总之，虽然它们都是用于发起HTTP请求的API，但Fetch和XHR有一些重要的区别，包括语法、默认行为和功能。

相关问题

fetch/xhr和其他请求的区别

### 回答1：
fetch/xhr和其他请求（如axios、ajax等）之间的主要区别在于它们的使用方式和一些功能上的不同。

首先，fetch是一种基于Promise的现代化网络请求API，而xhr是一种传统的XMLHttpRequest对象。fetch API基于新的web标准，可以更好地处理请求和响应，支持更多现代化的功能，而xhr则是老旧的方式。

另一个区别在于fetch API返回的是一个Promise对象，可以使用Promise的链式调用和async/await语法，非常方便处理异步操作。而xhr则需要使用回调函数来处理异步操作，代码结构可能相对复杂。

此外，fetch API默认情况下不会携带cookie信息，需要设置credentials属性为"include"才能发送cookie。而xhr默认会发送cookie信息，需要手动设置xhr.withCredentials属性为true来禁止发送cookie。

另外，fetch API在默认情况下只会拒绝请求错误的状态码（如404或500等），而不会拒绝其他的网络错误（如网络超时）。这意味着需要手动检查并处理网络错误。而xhr则可以通过onerror事件来处理所有类型的网络错误。

最后，fetch API在使用上可能相对简单，语法更加直观。而xhr则相对复杂，需要手动设置请求头、处理请求和响应等。

总结起来，fetch/xhr和其他请求的主要区别在于使用方式、功能支持和代码结构等方面。fetch提供了更现代化、更简洁的API，支持Promise和async/await语法，但xhr仍然是一种可靠和广泛使用的老旧方式。

### 回答2：
fetch和XMLHttpRequest (XHR) 是两种常用的网络请求方式，它们之间有以下几点区别：

1. 语法使用：fetch是浏览器提供的一种基于Promise的现代API，通过使用ES6的语法，使用更加简洁。XHR则是使用传统的回调函数的方式，使得代码可读性较差。

2. URL和参数：在使用fetch时，可以将URL和请求参数作为参数传递给fetch函数。XHR需要手动构建URL和参数，增加了额外的代码。

3. 跨域请求：fetch默认不会将跨域的cookie发送到目标服务器，需要设置`credentials`配置项为"include"。而XHR请求跨域时会自动携带cookie。

4. 请求头配置：fetch通过调用`Headers`对象来设置请求头信息，更加方便。XHR则需要通过`setRequestHeader`方法来设置。

5. 请求/响应：使用fetch时，需要通过两个Promise分别处理请求和响应，使得代码更加清晰。XHR则需要编写多个回调函数来处理请求与响应，并引发回调地狱问题。

6. 取消请求：使用fetch时，可以使用`AbortController`对象来取消正在进行的请求。XHR则需要手动使用`abort`方法来取消请求。

综上所述，fetch相比XHR具有更好的语法简洁性、使用更加方便、处理异步操作更加优雅等优点，但XHR在兼容性和一些特殊场景处理方面表现更好。所以，在选择网络请求方式时，根据具体的场景需求进行选择。

### 回答3：
fetch和XHR（XMLHttpRequest）都是用于发送HTTP请求并获取响应的JavaScript API。它们的主要区别如下：

1. 语法：fetch使用更简洁的语法，基于Promise实现，而XHR使用回调函数来处理异步请求。

2. 兼容性：XHR在所有主流浏览器中都得到了广泛支持，包括较旧的版本。而fetch在一些旧版本的浏览器中可能不被完全支持，需要使用polyfill进行兼容。

3. 请求和响应对象：XHR通过实例化XMLHttpRequest对象，并使用该对象来发送请求和接收响应。而fetch直接使用全局fetch函数来发送请求并返回一个Promise对象，该对象包含响应的相关信息。

4. 请求和响应的处理：XHR可以通过各种回调函数来处理请求和响应，包括onload、onerror和onprogress等。而fetch使用then方法链式调用来处理请求和响应，也可以使用catch捕获错误。

5. 默认不接受跨域请求：在默认情况下，XHR在同源策略下才能发送跨域请求。而fetch在跨域请求时，默认不发送站点的身份验证cookie和HTTP认证信息，需要手动设置credentials为include。

总的来说，fetch相对于XHR提供了更简洁的语法和更强大的功能，并且更符合现代JavaScript的编码风格。但是在兼容性方面，XHR更广泛支持，可以在更多的浏览器环境中使用。

fidder怎么设置fetch/xhr过滤

Fiddler是一个网络调试工具，主要用于抓包、分析HTTP/HTTPS请求和响应。如果你想要设置Fetch/XHR（JavaScript Fetch API 和 XMLHttpRequest）请求的过滤规则，可以按照以下步骤操作：

1. **打开 Fiddler**：首先确保Fiddler已启动并处于活动状态，通常它会在浏览器的开发者工具栏显示一个小图标。

2. **启用捕捉模式**：点击Fiddler工具栏上的"Listen for HTTP"按钮，这将开启代理模式，所有通过Fiddler的网络流量都会被捕获。

3. **过滤请求**：
- 对于Fetch API，你需要创建一个新的规则来识别fetch()调用。右键点击Fiddler的"Rules"选项卡，选择"Edit Rules..."，然后在脚本编辑器中添加如下的条件表达式：

     if (oRequest.url.Contains("fetch") || oRequest.headers["X-Requested-With"] == "fetch")

这样可以捕获包含`fetch`字样的URL或`X-Requested-With`头部值为`fetch`的请求。

- 对于XHR，你可以直接查找特定的请求类型，例如`XMLHttpRequest`，修改规则如下：

     if (oRequest.method == "GET" && oRequest.headers["X-Requested-With"] == "XMLHttpRequest")

4. **保存规则**：完成规则编写后，记得点击"Save Rules"保存更改。

5. **查看和处理请求**：现在当你有Fetch或XHR请求满足这些条件时，它们会出现在Fiddler的面板中，你可以查看、修改或拦截这些请求。