Fetch API -如何将查询从前端发送到后端？

Fetch API是一种现代的Web API，用于在前端将查询发送到后端。它提供了一种简单、灵活的方式来进行网络请求，并且可以与各种后端技术进行交互。

要使用Fetch API将查询从前端发送到后端，可以按照以下步骤进行操作：

1. 构建请求对象：使用fetch()函数创建一个请求对象，并指定要发送的URL和请求方法（GET、POST、PUT、DELETE等）。
2. 设置请求头：通过请求对象的headers属性，可以设置请求头信息，例如Content-Type、Authorization等。
3. 添加请求体：对于POST、PUT等需要发送数据的请求，可以通过请求对象的body属性添加请求体数据。可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。
4. 发送请求：调用请求对象的fetch()方法来发送请求。该方法返回一个Promise对象，可以使用.then()和.catch()方法来处理请求的响应和错误。
5. 处理响应：在.then()方法中，可以获取到后端返回的响应数据。可以使用.json()方法将响应数据解析为JSON格式，或者使用.text()方法获取原始文本数据。

以下是一个示例代码，演示如何使用Fetch API将查询从前端发送到后端：

// 构建请求对象
const url = 'https://example.com/api/data';
const method = 'POST';
const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token'
};
const body = JSON.stringify({ key: 'value' });

// 发送请求
fetch(url, {
  method: method,
  headers: headers,
  body: body
})
  .then(response => response.json()) // 解析响应数据为JSON格式
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在这个示例中，我们使用POST方法发送一个JSON格式的请求体数据到指定的URL。请求头中包含了Content-Type和Authorization信息。在.then()方法中，我们解析了响应数据，并进行了相应的处理。