fetch

• fetch 是一个用于进行网络请求的现代 JavaScript API。它提供了一种简洁和灵活的方式来发送 HTTP 请求并处理响应。
• 使用 fetch，您可以向服务器发送各种类型的请求（例如 GET、POST、PUT、DELETE 等），并处理返回的响应数据。它支持 Promise API，因此您可以使用异步编程方式处理网络请求。

fetch 发送 GET 请求示例:

• 默认是get请求

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败', error);
  });

• 在第一个 .then() 中，我们使用 response.json() 将响应解析为 JSON 格式的数据。然后，我们可以在第二个 .then() 中处理解析后的数据。如果请求失败，.catch() 用于捕获并处理错误。
• fetch API 还提供了许多其他的选项和功能，例如设置请求头、发送 POST 请求、处理文件上传等。它已成为现代 Web 开发中进行网络请求的常用工具之一

fetch 发送 POST 请求示例:

注意：

1. 要设置请求头headers
2. 参数写到body属性，
3. 参数要转为需求的格式 例如：body: JSON.stringify(data)

// 创建一个包含请求参数的对象
const data = {
  username: 'john_doe',
  password: 'password123'
};

// 发送 POST 请求
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(result => {
    // 处理响应数据
    console.log(result);
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败', error);
  });

• 在上述示例中，我们首先创建一个包含请求参数的对象 data，其中包括用户名和密码。然后，我们使用 fetch 发送 POST 请求到指定的 URL (https://api.example.com/login)。在请求选项中，我们设置了请求方法为 'POST'，请求头的 'Content-Type' 为 'application/json'，并将请求参数对象转换为 JSON 字符串并作为请求体发送 (body: JSON.stringify(data))。
• 然后，我们通过 Promise 链式调用处理响应。在第一个 .then() 中，我们使用 response.json() 解析响应为 JSON 格式的数据。然后，我们可以在第二个 .then() 中处理解析后的数据。如果请求失败，.catch() 用于捕获并处理错误。

fetch和axios的区别

• axios和fetch是两个常用的发送网络请求的工具，它们有以下区别：

1. axios可以全局配置请求拦截器和响应拦截器，方便统一处理请求和响应；fetch则没有类似的全局配置选项，需要每次手动配置请求头等信息。
2. axios可以自动将请求体转换为JSON格式，也可以自动将响应体解析为JSON格式；fetch则需要手动处理请求体和响应体的格式转换。
3. axios对请求超时、错误、取消等情况进行了封装处理，方便处理异常情况；fetch则没有这些封装处理。
4. fetch 并没有提供进度事件，如需检测请求的进度，使用XMLHttpRequest对象。

• 综上，axios更加灵活、方便，也更加易于处理异常情况，因此在项目中更加常用。