JS Fetch API 发布请求 - Javascript

在前端开发中，我们经常需要与后端接口交互来获取数据。在传统的方式中，我们可以使用Ajax来完成这一任务。但在现代化的Web开发中，我们可以使用Fetch API来完成数据请求的交互。

什么是Fetch API

Fetch API是Javascript的一种新型网络请求API，它提供更强大、更灵活、更易用的API，可以更好地掌控请求和响应。与传统的Ajax请求相比，Fetch API的几个显著优点：

• Fetch API返回Promise，使操作更便捷
• Fetch API可以进行跨域请求，而不需要使用JSONP(解决跨域问题)
• Fetch API可以利用ES6中的async/await语法来处理异步操作

发送Fetch请求

基本用法

我们可以使用fetch()方法来发送请求。 fetch() 接收一个参数，该参数指定了请求的URL：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

上面的代码向服务器发送了一个请求，然后在回调函数中将响应转换为JSON格式，并输出到控制台。

设置请求选项

我们可以通过传递其他参数来自定义请求的一些行为，例如请求方法、请求头、请求体等等。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

上面的代码中，headers和body参数用于声明请求头和请求体，格式为键值对对象。我们需要注意的是，body参数必须是字符串或者FormData对象，否则fetch()将自动设置请求头为"application/json;charset=UTF-8"。

处理响应

fetch() 方法返回一个 Promise 对象，该对象代表了请求的响应结果。可以使用 .then() 方法把数据从 Promise 对象中解析出来，同时也可以处理错误情况。

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

总结

Fetch API 是一种现代化的网络请求API, 它的操作更方便，易用性更好，更加灵活且适用范围更广。我们可以使用它来发送请求，自定义请求选项，处理响应并且更好地掌控请求和响应。