Question

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

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

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

Answer 1

我认为你不了解Axios和HTTP请求是如何工作的。在发出PUT请求时，您必须发送您想要的数据＆＃34; put＆＃34;进入项目。您似乎认为当您发出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请求，并且数据表示要将名称更新为＆＃34; Tophat Cat＆＃34;。

然后服务器将发送一个响应（它可以是来自＆＃34;更新成功。＆＃34;到更新的猫的数据的JSON表示。

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

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

axios.put('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 创建新cat所需的数据。在PUT请求中，我们只包含了我们想要更新的内容。在POST请求中，其他数据尚不存在，因此我们必须指定所有内容。

Axios PUT请求服务器

1 个答案: