fetch
时间: 2025-07-22 09:07:46 浏览: 12
### Fetch API 的使用方法
Fetch API 是浏览器专为 JavaScript 发起异步请求设计的,它提供了一个简洁的接口,使异步处理更加直观和方便。Fetch API 返回的是一个 Promise 对象,这使得异步处理更加直观和易于理解 [^1]。
#### 基本用法
最简单的 `fetch` 用法如下:
```javascript
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
```
上述代码展示了如何使用 `fetch` 发起一个 GET 请求,并将响应解析为 JSON 格式。如果请求成功,数据将被打印到控制台;如果请求失败,错误信息将被捕获并打印到控制台 [^2]。
#### 封装 `fetch` 使其更易用
为了方便使用,可以封装 `fetch`,使其更加易用。以下是一个简单的封装示例:
```javascript
function fetchData(url, options = {}) {
const { method = 'GET', headers = {}, body } = options;
return fetch(url, {
method,
headers,
body
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => {
console.error('Fetch failed:', error);
});
}
// 使用
fetchData('https://example.com/api/data')
.then(data => {
console.log(data);
});
```
此封装函数 `fetchData` 接受 URL 和可选的配置对象 `options`,并返回一个 Promise。如果请求成功,数据将被解析为 JSON 并传递给 `.then()`;如果请求失败,错误信息将被捕获并打印到控制台 [^3]。
#### Fetch API 的优势
与 XMLHttpRequest 相比,Fetch API 提供了更好的错误处理机制,可以更容易地捕获和处理网络请求中的错误。此外,Fetch API 可以很容易地被其他技术使用,例如 Service Workers。它还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念,例如 CORS 和 HTTP 的扩展。Fetch 提供了对 Request 和 Response(以及其他与网络请求有关的)对象的通用定义,使之应用于更多场景 [^4]。
###
阅读全文
相关推荐


















