在 React 中发出 POST 请求的不同方法

1. 在 React 中使用 fetch() 发出 POST 请求
2. 在 React 中使用 axios 发出 POST 请求
3. 在 React 中使用纯 JavaScript 发出 POST 请求

在 React 中构建复杂的 Web 应用程序时，使用 API 是必不可少的。大多数时候，应用程序会发出 get 请求以从 API 读取数据。

有时需要发出 post 请求，以更新 API 上的数据。本文探讨了如何在 React 中发出 post 请求。

在 React 中有多种方式可以与 API 交互。在本文中，我们想讨论最常见的方法。

React 库没有提供一种特定的解决方案来进行 REST 调用。任何与 JavaScript 兼容的 AJAX 库也可以在 React 中使用。

在 React 中使用 fetch() 发出 POST 请求

Fetch API 是在 JavaScript 中进行 REST 调用的最常见和最简单的方法。从 API URL 读取值就像使用 API URL 调用 fetch() 一样简单。

发出 POST 请求稍微复杂一些，但仍然相当容易。让我们来看一个简单的 fetch 请求示例。

fetch('https://samplewebsite.com/API/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    parameterOne: 'something',
    parameterTwo: 'somethingElse'
  })
});

这是一个使用 fetch() 发出的简单 POST 请求的示例。阅读官方文档以了解有关 Fetch API 的更多信息，例如潜在参数列表。

在 React 中使用 axios 发出 POST 请求

这是在 React 中发出请求的另一个流行包。它本身并不包含在 JavaScript 中，因此你必须安装它才能发送请求。

要安装 axios 包，请在 npm 中运行以下命令。

npm install axios --save

安装后，你可以发出看起来比 Fetch API 更简单的 POST 请求。

axios
    .post('/endpoint', {
      name: 'John Doe',
    })
    .then(function(response) {
      return response;
    })
    .catch(function(error) {
      return error;
    });

这是使用 axios 发出 POST 请求的基本示例。

在 React 中使用纯 JavaScript 发出 POST 请求

在 JavaScript 中，向 API 发送任何请求的传统方式是使用 XMLHttpRequest() 接口。你可以创建此对象的实例并将其存储在变量中。

var req = new XMLHttpRequest();
req.open('POST', '/endpoint', true);
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.send(data);

它可能看起来不那么简单，但它完成的结果与使用 fetch 和 axios 进行的 POST 调用相同。