浏览器fetch方法怎么用 浏览器 fetch

`fetch` 方法是现代 JavaScript 中用于发起网络请求的 API，提供了一个更强大和灵活的替代方案，取代了较旧的 `XMLHttpRequest`。以下是对 `fetch` 方法的详细介绍：

### 1. **基本语法**

```javascript

fetch(url, options)

```

- **url**：请求的资源 URL。

- **options**：可选的配置对象，包含请求方法、头部等。

### 2. **常用选项**

- **method**：HTTP 方法（如 `GET`, `POST`, `PUT`, `DELETE`）。

- **headers**：请求头部，通常为一个对象。

- **body**：发送的数据（仅适用于 `POST` 和 `PUT` 请求）。

- **mode**：请求的模式，如 `cors`, `no-cors`, `same-origin`。

- **credentials**：控制是否发送凭据（如 Cookies），值可以是 `omit`, `same-origin`, `include`。

- **cache**：缓存模式（如 `default`, `no-cache`, `reload`）。

### 3. **基本用法**

#### GET 请求

```javascript

fetch('https://api.example.com/data')

.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('Fetch error:', error));

```

#### POST 请求

```javascript

fetch('https://api.example.com/data', {

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('Fetch error:', error));

```

### 4. **处理响应**

- **Response 对象**：`fetch` 返回的是一个 Promise，解析后得到 `Response` 对象。

- **常用方法**：

- `response.json()`：解析 JSON 数据。

- `response.text()`：解析文本数据。

- `response.blob()`：解析 Blob 数据（用于文件）。

- `response.ok`：检查响应状态是否为 2xx。

### 5. **错误处理**

- `fetch` 只会在网络错误时拒绝 Promise，HTTP 错误状态（如 404）不会触发错误。

- 需要手动检查 `response.ok` 来处理错误状态。

### 6. **CORS 支持**

- `fetch` 支持 CORS，可以通过设置 `mode` 和 `credentials` 选项来控制跨域请求。

### 7. **总结**

`fetch` 方法是一个强大的 API，简化了网络请求的处理，提供了更好的灵活性和可读性。适用于现代 web 开发，支持 Promise 和异步操作。