XMLHttpRequest的问题

• 所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码
• 采用传统的事件驱动模式，无法适配新的 Promise Api

Fetch Api 的特点

• 并非取代 AJAX，而是对 AJAX 传统 API 的改进
• 精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景
• 使用 Promise Api，更利于异步代码的书写
• Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api

基本使用

使用fetch函数即可立即向服务器发送网络请求

• 该函数有两个参数：
  • 必填，字符串，请求地址
  • 选填，对象，请求配置

使用 Fetch API，我们可以发送 GET、POST、PUT、DELETE 等不同类型的请求，并能够设置请求头、传递参数和处理响应数据。下面是 Fetch API 的基本使用示例：

// 发送 GET 请求
fetch('https://api.test.com/data')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送 POST 请求
fetch('https://api.test.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username: 'zero', password: '123456' }),
})
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

总结

Fetch API 是ES6新增的，用于进行网络请求。它提供了一种简洁、灵活的方式来发送 HTTP 请求，并处理响应数据。