基于Fetch API的高级通信指南

2023-09-17 19:17:33

初识Fetch API

Fetch API是浏览器中的一个内置接口，可以用于发送网络请求。它是一个现代的、基于Promise的API，与传统的XMLHttpRequest (XHR)相比，它提供了更简单、更灵活的方式来处理网络请求。

Fetch API的语法非常简单：

fetch(url)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

该代码创建一个GET请求，并将请求发送到给定的URL。然后，它等待服务器响应。如果响应成功（状态代码在200到299之间），则将响应数据解析为JSON格式。如果响应不成功，则抛出错误。最后，将JSON数据记录到控制台。

进阶使用Fetch API

Fetch API不仅可以发送GET请求，还可以发送其他类型的请求，如POST、PUT、DELETE等。它还支持多种请求选项，如请求头、请求正文等。

以下是一些进阶使用Fetch API的示例：

发送POST请求：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

发送PUT请求：

fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

发送DELETE请求：

fetch(url, {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

设置请求头：

fetch(url, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <token>'
  }
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });

设置请求正文：

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error: ', error);
  });