Axios PUT 请求到服务器

我阅读了 axios on PUT 请求的文档，它看起来与 GET 请求类似。但是，没有像 GET 这样的示例代码，但我认为它与如何执行 GET 请求类似。我似乎在使用 axios 发出 PUT 请求时遇到问题。这是我迄今为止使用的测试服务器的情况：

axios.put('http://localhost:8080/cats')
  .then(res => {
    this.setState({
      cat: res
    });
  })
  .catch((err) => {
    console.log(err);
  })

基本上，我正在尝试选择一个项目并对其进行更改。

我认为你不明白axios和HTTP请求是如何工作的。发出 PUT 请求时，您必须发送要“放入”项目中的数据。您似乎认为，当您发出 PUT 请求时，您将收到返回的项目，然后您可以对其进行编辑并自动保存，但事实并非如此。

想象一下你有一大群猫，它们有名字、图像和描述。现在假设您要更新由数字 1（即它的 ID）标识的猫的名称。

以下是使用 PUT 请求（通过 Axios）更新该猫的名称的示例：

axios.put('https://example.com/cats/1', {
    name: 'Tophat Cat'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

看看我如何指定我想要更新哪只猫（通过提供该猫的唯一 URL）并提供我想要更新的特定数据（名称）？现在，您的服务器将看到它收到了第一只猫的 PUT 请求，并且数据显示将名称更新为“Tophat Cat”。

然后服务器将发送响应（可以是从“更新成功”到更新后的猫数据的 JSON 表示的任何内容）。

请记住，PUT 请求只能用于更新已存在的数据。如果您想添加新数据（这在您的示例中看起来有点像，因为您将请求指向/cats没有 ID），您应该使用 POST 请求。 POST 请求的目的是添加新数据和 PUT 请求的目的是更新现有数据.

POST 请求看起来与上面的 PUT 请求示例非常相似，但有一些重要的变化：

axios.post('https://example.com/cats', {
    name: 'Catsandra',
    image: 'https://example.com/images/catsandra.jpg',
    description: 'Catsandra is the fanciest cat in town!'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

现在请求将只是/cats这在 REST API 中很常见（它不能指向特定的猫 ID，因为该猫还不存在）。它还指定all创建新猫所需的数据。在 PUT 请求中，我们只包含我们想要更新的内容。在 POST 请求中，其他数据尚不存在，因此我们必须指定所有内容。