你不需要jQuery(三) 新AJAX方法fetch()
通过实例比较XMLHttpRequest与新的AJAX方法fetch()之间的不同
随着技术的发展，XMLHttpRequest这种老牌的AJAX方式逐渐显得过时，而fetch()方法为我们提供了更为简洁、现代的解决方案。它们之间的主要区别在于，Fetch API使得接口更为简单、直观，避免了回调的复杂性，无需使用复杂的XMLHttpRequest API。
让我们通过一个简单的例子来直观感受两者的差异。假设我们需要请求一个URL并获取返回的JSON数据。
如果使用XMLHttpRequest，我们需要设置两个监听器来捕捉成功和错误的情况，同时需要调用open()和send()方法。示例代码如下：
```javascript
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
```
而使用fetch()，我们的代码将更为简洁。我们发出fetch请求，然后检查响应的状态是否为200。如果是，我们将响应数据转换为JSON并处理；如果不是，我们则处理错误。示例代码如下：
```javascript
fetch('./api/some.json')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
response.json().then(data => {
console.log(data);
});
})
.catch(err => {
console.log('Fetch Error :-S', err);
});
```
fetch()还允许我们访问响应对象的元数据，例如内容类型、日期、状态、状态文本、类型和URL等。例如，我们可以使用以下代码获取这些元数据信息：
```javascript
fetch('users.json')
.then(response => {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
```
当我们执行一个fetch请求时，响应的数据的类型（response.type）可以是“basic”、“cors”或“opaque”。这些类型告诉我们应该如何处理这些数据以及数据的来源。
虽然XMLHttpRequest仍然可以完成AJAX任务，但fetch()方法提供了更为简洁、现代的解决方案，使得处理AJAX请求更为方便、直观。在一个典型的网络应用中，跨域资源共享（CORS）扮演着至关重要的角色。当请求发起自同一个域时，响应的类型通常为“basic”，此时对响应内容的访问不受任何限制。当请求来自不同的域时，我们需要考虑CORS机制以确保安全。
当请求来自某个不同的域且响应包含CORS头信息时，响应的类型为“cors”。这种类型的响应与“basic”响应在大多数情况下相似，但在访问响应头信息方面有所限制。你只能查看如`Cache-Control`、`Content-Language`、`Content-Type`、`Expires`、`Last-Modified`和`Pragma`等特定的头信息。
还存在一种被称为“opaque”的响应类型。当请求来自一个域但不具备CORS头信息时，就会出现这种情况。这种类型的响应无法被读取，我们无法知道请求是否成功，也无法获取任何有关响应状态的信息。当前的fetch()实现无法处理这种请求。
在处理跨域请求时，我们可以使用fetch方法的模式参数来指定请求的模式。这些模式包括：
“same-origin”：只有来自相同域的请求才能成功；
“cors”：允许跨域请求，但需要正确的CORS头信息；
“cors-with-forced-preflight”：在执行实际请求之前先进行预检（preflight）检查；
“no-cors”：目前这种模式无法执行。
我们可以使用fetch函数来发起跨域请求，并通过串联Promises来处理响应。例如：
```javascript
fetch(' {mode: 'cors'})
.then(response => {
// 检查响应状态并成JSON对象
return status(response).then(json);
})
.then(data => {
console.log('请求成功，返回JSON数据', data);
})
.catch(error => {
console.log('请求失败', error);
});
```
在这个例子中，我们首先使用status函数检查响应状态，如果状态码在200到300之间，我们将其为JSON对象。这个流程使得代码更加条理清晰，易于维护。通过串联Promises，我们可以共享一些业务逻辑，提高代码的可读性和可测试性。这种处理方式也有助于处理复杂的异步操作，提高代码的健壮性。现代Web开发中的Fetch API表单数据提交
在Web开发中，表单数据提交是一个基础且常见的操作。借助Fetch API，这一操作变得更为简洁高效。
Fetch API以其简洁性和灵活性脱颖而出，主要得益于其method和body参数选项。想象一下这样的场景：你有一个表单，用户填写完毕后需要提交。使用Fetch API，你可以轻松实现这一功能。
示例代码如下：
```javascript
fetch(url, {
method: 'post', // 指定请求方法为POST
headers: { // 设置请求头
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum' // 这里是表单数据，以键值对的形式传递
})
.then(response => response.json()) // 将响应转换为JSON格式
.then(data => {
console.log('请求成功，返回的数据是：', data); // 如果请求成功，打印返回的数据
})
.catch(error => {
console.log('请求失败，错误详情：', error); // 如果请求失败，捕获错误并打印
});
```
除了上述基本用法，Fetch API还允许你在请求中附带用户身份凭证信息。如果你想在fetch请求里附带cookies等凭证信息，只需将credentials参数设置为“include”即可。这样，你的请求就会自动携带这些凭证信息。
示例代码如下：
```javascript
fetch(url, {
credentials: 'include' // 允许携带用户身份凭证信息
});
```
Fetch API相较于传统的XMLHttpRequest（XHR）更为简洁，与jQuery中的ajax API相比也毫不逊色。它提供了强大的功能，使得异步操作变得更为简单和直观。无论是在表单提交还是其他网络请求场景中，Fetch API都是一个值得你深入学习和掌握的工具。希望本文的内容能对大家的学习有所帮助，也希望大家能够支持狼蚁SEO，共同更多Web开发的奥秘。