fetch 请求参数
时间: 2024-08-13 08:03:20 浏览: 26
Fetch API 是一种现代浏览器提供的用于向服务器发送异步数据请求的 JavaScript 功能。它允许开发者通过 `fetch()` 函数发起 HTTP 请求,包括GET、POST、PUT、DELETE 等操作。在 `fetch` 请求中,你可以传递参数,但通常不需要像传统的 `XMLHttpRequest` 那样显式地在 URL 中编码它们。
当你需要发送参数时,有几种常见的方式:
1. **URL查询参数** (Query Parameters): 可以将参数附加到 URL 的末尾,形式如 `'/api/resource?key=value&anotherKey=anotherValue'`。在 `fetch` 时,可以将完整的 URL 作为 `fetch` 调用的参数。
```javascript
fetch('http://example.com/api?param1=value1¶m2=value2')
```
2. **URLSearchParams 对象** (for GET requests): 如果你想构造复杂或大量参数,可以用这个内置对象先处理,然后拼接到 URL。
```javascript
const params = new URLSearchParams();
params.append('key', 'value');
fetch(`http://example.com/api?${params.toString()}`);
```
3. **POST/PUT 请求** (Body Parameters): 对于 POST 或 PUT 等非查询请求,你需要将参数放在请求体(body)中。这时可以创建一个 JSON 对象、FormData 或字符串,再设置到 `fetch` 的第二个参数(options)里,如:
```javascript
const data = { key: 'value' };
fetch('http://example.com/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)