使用 fetch API 的简单 POST 请求

fetch() 方法与 XMLHttpRequest 和 Axios 请求一样，用于将请求发送到服务器。主要区别在于 Fetch API 使用 Promises，这使得 API 更简单、更干净。您将使用 fetch API 获得整个 Get 和 Post 方法

句法：

• fetch(url, { config }) 
  .then(res => { 
      // Handle response 
  }) 
  .catch(err => { 
      // Handle errors 
  }) 
  

• 由于 fetch 返回一个 Promise，我们也可以使用async/await关键字来发出请求：

  async () => {
    const resp = await fetch('http://example.com/example.json');
    // Handle response
  }
  

使用 fetch() 创建 POST 请求： POST 请求广泛用于向服务器提交表单。

fetch(url, {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    credentials: 'include',
    body: 'foo=bar&lorem=ipsum'
  })
  .then(res.json())
  .then(res => {
    // Handle response 
    console.log('Response: ', res);
  })
  .catch(err => {
    // Handle error 
    console.log('Error message: ', error);
  });

解释：

• 要创建 POST 请求，我们需要为请求指定一些参数，例如方法、标头等。首先，我们需要指定请求方法（GET、POST、DELETE 等），在我们的例子中是 POST。接下来是 Content-type，它告诉客户端返回数据的实际内容类型是什么。凭据键是可选的，如果您想使用 cookie 等凭据发出获取请求，则应使用该键。然后我们设置包含我们希望传递给服务器的数据的主体。
• fetch() 请求的响应是一个流对象，这意味着当我们调用 json() 方法时，会返回一个 Promise，因为流的读取是异步发生的。
• 如果 API 返回的状态为 201（Created 的 HTTP 状态码），则可以访问 API 返回的数据-res(response)。如果发生错误，将执行 catch 块内的代码。