什么是 fetch API，如何使用它？

### 使用 Fetch API 进行网络请求 Fetch 提供了一个灵活且强大的接口来执行 HTTP 请求和处理响应。此方法返回一个 `Promise`，该承诺解析为 `Response` 对象表示来自网络请求的数据[^1]。 对于基本的 GET 请求，可以这样使用 fetch： ```javascript fetch('https://api.example.com/items') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('There has been a problem with your fetch operation:', error)); ``` 发送 POST 请求并附带 JSON 数据的例子如下所示： ```javascript const postData = { title: 'foo', body: 'bar', userId: 1 }; fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(postData) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 当需要上传文件或者表单数据时，可利用 `FormData` 构造函数创建对象，并将其作为请求体传递给服务器[^2]。 ```javascript const formData = new FormData(); formData.append('file', fileInputElement.files[0]); formData.append('user', 'abc'); fetch('/submit-form', { method: 'POST', body: formData }); ``` 为了更好地管理异步操作以及简化错误处理流程，在现代 JavaScript 中推荐采用 async/await 结构重写上述代码片段[^3]。 ```javascript async function fetchData(url) { try { let response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } let data = await response.json(); console.log(data); } catch (error) { console.error('Failed to fetch data:', error.message); } } ```