如何使用Fetch API

使用Fetch API的步骤：1. 发起基本GET和POST请求；2. 处理响应数据；3. 处理错误和异常情况；4. 使用Fetch API的高级功能。要使用Fetch API发送GET请求，您可以简单地传递URL作为参数，并使用fetch()方法。

1. 发起基本GET和POST请求

要使用Fetch API发送GET请求，您可以简单地传递URL作为参数，并使用fetch()方法。以下是一个示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误：', error);
  });

要发送POST请求，您需要提供一些额外的选项，如请求方法和请求体。示例如下：

fetch('https://api.example.com/create', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误：', error);
  });

2. 处理响应数据

Fetch API返回一个Promise，您可以使用.then()来处理响应数据。通常，您会在第一个.then()中解析响应，如JSON数据。在第二个.then()中，您可以处理已解析的数据。这是一个示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误：', error);
  });

3. 处理错误和异常情况

在Fetch API中，您可以使用.catch()来捕获任何错误或异常情况。这是一个示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应错误');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误：', error);
  });

4. 使用Fetch API的高级功能

Fetch API还支持一些高级功能，如自定义请求头和超时控制。您可以使用Headers对象来设置请求头，以及signal选项来设置请求超时。以下是一个示例：

const headers = new Headers();
headers.append('Authorization', 'Bearer your-access-token');

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', {
  method: 'GET',
  headers,
  signal
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误：', error);
  });

// 可以使用 controller.abort() 来取消请求
setTimeout(() => {
  controller.abort();
  console.log('请求已取消');
}, 5000);

使用Fetch API的这些高级功能可以提高网络请求的安全性和可控性。