淘宝双十一超级红包 》
Fetch API
Fetch API 是一种现代的、功能强大的网络请求工具，它允许你通过 JavaScript 异步地请求资源，而不需要使用传统的 XMLHttpRequest 对象。
Fetch API 可以简洁地发起 HTTP 请求，并处理服务器的响应。
Fetch API 基于 Promise 设计，使得异步操作更加简洁和易于理解。
Fetch 优点：
- 基于 Promises，代码更加简洁和易读。
- 更好的错误处理机制：只在网络错误（如无法连接服务器）时返回
catch，而非状态码错误。 - 支持多种数据格式（JSON、文本、二进制等）。
- 可以处理跨域请求，通过
CORS机制配置。
fetch 的基本用法
fetch 的语法相当简洁，最基本的形式是：
fetch(url)
.then(response => response.json()) // 解析 JSON 数据
.then(data => console.log(data)) // 处理数据
.catch(error => console.error('Error:', error)); // 错误处理
参数：
- url：要发送请求的目标 URL。
- options（可选）：可以指定请求方法（GET、POST 等）、请求头、请求体等内容。
返回值
返回一个 Promise 对象，Promise 在请求成功时返回 Response 对象，在请求失败时被拒绝。
使用 Fetch
1、基本 GET 请求：
实例
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在这个例子中，fetch 默认执行 GET 请求，返回的 response 是一个 Response 对象，通过调用 .json() 方法来解析 JSON 数据。
2、发送 POST 请求：
实例
method: 'POST', // 指定请求方法
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
key: 'value'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
这里，我们通过设置 method 为 'POST' 来发送 POST 请求，并在请求体 body 中发送 JSON 格式的数据。
3、处理响应状态：
实例
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在处理响应时，我们首先检查响应状态是否成功（response.ok），如果不成功则抛出错误。
4、发送带凭据的请求：
实例
credentials: 'include' // 包括 cookies 在请求中
});
使用 credentials: 'include' 可以在跨域请求中发送 cookies。
5、使用 Request 和 Response 对象：
实例
fetch(request)
.then(response => response.blob())
.then(imageBlob => {
const imageObjectUrl = URL.createObjectURL(imageBlob);
img.src = imageObjectUrl;
});
你可以创建 Request 对象来定制请求，fetch 会返回一个 Response 对象，你可以用它来获取不同类型的响应体，如 blob、text、json 等。
6、错误处理：
实例
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Something went wrong');
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在链式调用中，任何地方抛出的错误都会被 .catch() 捕获。
7、设置请求头
可以通过 headers 属性为请求添加自定义的 HTTP 头信息，例如 Content-Type、Authorization 等。
实例
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token'
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
8、处理非 200 的响应状态
fetch 不会自动将 HTTP 错误状态（如 404 或 500）作为拒绝的 Promise，仍然需要检查响应状态。
实例
.then(response => {
if (!response.ok) { // 检查响应状态
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
9、发送表单数据
可以使用 FormData 对象将表单数据发送给服务器：
实例
formData.append('username', 'John');
formData.append('email', 'john@example.com');
fetch('https://example.com/api/form', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
10、跨域请求
如果需要进行跨域请求，可以在服务器端设置 CORS（Cross-Origin Resource Sharing）。在前端，也可以通过 credentials 选项来指定是否发送 cookies 等凭据。
实例
method: 'GET',
credentials: 'include' // 允许跨域请求时携带 cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Fetch 与 PHP
在 PHP 中使用 AJAX 请求与在其他后端语言中使用 AJAX 没有本质区别。PHP 脚本会在服务器端接收请求、处理数据，然后返回响应。
客户端 JavaScript 代码使用 Fetch API 发送请求和处理响应。
例如，如果你有一个 PHP 文件 server.php，它接收一个 GET 请求并返回一些数据，你可以这样使用 Fetch：
实例
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在 PHP 端，你将解析请求参数并返回响应：
实例
// server.php
$queryString = $_SERVER['QUERY_STRING'];
parse_str($queryString, $params);
$responseData = array('status' => 'success', 'data' => $params);
echo json_encode($responseData);
?>
这样，你就可以在客户端使用 Fetch API 与 PHP 后端进行通信了。