第五章 Fetch API

1 Fetch API 介绍

Fetch API 被设计用来取代 XMLHttpRequest，它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。

Fetch API 的主要特点包括：

1. Promise 风格的 API：Fetch API 提供了 Promise 风格的 API，可以更加方便地处理异步请求和响应。
2. 更加灵活的请求和响应：Fetch API 可以发送任何类型的请求，包括 GET、POST、PUT、DELETE 等，也可以接收任何类型的响应，包括文本、JSON、二进制数据等。
3. 更加强大的响应处理：Fetch API 提供了一系列的响应处理方法，包括 json()、text()、blob()、arrayBuffer() 等，可以更加方便地处理响应数据。

2 使用演示

// fetch() 方法返回一个 promise 对象
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())     // 解析 json 格式的响应数据
  .then(data => console.log(data))         // 将处理好的响应内容输出到控制台        
  .catch(error => console.error(error)); // 如果出现错误，使用 catch() 方法处理异常。

3 设置请求配置项

 fetch(url, {
    method: 'POST',             // 设置请求方式
    headers: {                    // 设置请头条
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)     // 设置请求体，格式必须与请求头中的 "Content-Type" 匹配
 });