Fetch API 是 JavaScript 中基于承诺的现代接口，用于发出 HTTP 请求。它简化了从服务器获取资源的过程，取代了 XMLHttpRequest 等旧方法。 Fetch 提供了一种更清晰、更易读的方法来处理网络请求和响应，支持 Promises、流式传输和异步/等待等功能。
fetch(url, options)
.then(response => {
// Handle the response
})
.catch(error => {
// Handle errors
});
获取默认为 GET 方法。
示例：
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => console.log("Data:", data))
.catch(error => console.error("Error:", error));
要将数据发送到服务器，请使用带有选项对象中的 body 属性的 POST 方法。
示例：
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "foo",
body: "bar",
userId: 1,
}),
})
.then(response => response.json())
.then(data => console.log("Response:", data))
.catch(error => console.error("Error:", error));
fetch 函数接受一个选项对象来配置请求：
| Option | Description |
|---|---|
| method | HTTP method (e.g., GET, POST, PUT, DELETE). |
| headers | Object containing request headers. |
| body | Data to send with the request (e.g., JSON, form data). |
| credentials | Controls whether cookies are sent with the request (include, same-origin). |
6.处理响应
| Method | Description |
|---|---|
| response.text() | Returns response as plain text. |
| response.json() | Parses the response as JSON. |
| response.blob() | Returns response as a binary Blob. |
| response.arrayBuffer() | Provides response as an ArrayBuffer. |
示例：获取 JSON
fetch(url, options)
.then(response => {
// Handle the response
})
.catch(error => {
// Handle errors
});
Async/await 简化了 Fetch 中 Promise 的处理。
示例：
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => console.log("Data:", data))
.catch(error => console.error("Error:", error));
与 XMLHttpRequest 不同，Fetch 不会因为 HTTP 错误而拒绝 Promise。您必须检查响应的 ok 属性或状态代码。
示例：
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "foo",
body: "bar",
userId: 1,
}),
})
.then(response => response.json())
.then(data => console.log("Response:", data))
.catch(error => console.error("Error:", error));
Fetch 本身不支持请求超时。您可以使用 Promise.race() 实现超时。
示例：
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));
| Feature | Fetch API | XMLHttpRequest |
|---|---|---|
| Syntax | Promise-based, simpler, cleaner. | Callback-based, verbose. |
| Error Handling | Requires manual handling of HTTP errors. | Built-in HTTP error handling. |
| Streaming | Supports streaming responses. | Limited streaming capabilities. |
| Modern Features | Works with Promises, async/await. | No built-in Promise support. |
Fetch 是现代 Web 开发项目的理想选择。
它与 Promises 和 async/await 无缝集成。
当您需要更干净且更易于维护的代码时使用它。
以上是掌握 Fetch API：在 JavaScript 中简化 HTTP 请求的详细内容。更多信息请关注PHP中文网其他相关文章！
