Axios向服务器发送PUT请求

Question

我阅读了有关axios PUT请求的文档，它似乎与GET请求类似。然而，与GET请求不同的是，文档中没有像GET请求那样的示例代码，但我认为它与如何执行GET请求类似。我在使用axios时遇到了问题。这是我目前在使用测试服务器进行PUT请求的情况：

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

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

- jann

---

使用 PUT 方法，我们期望会有一些数据需要被 放置 ... 我似乎遇到了问题，是什么问题呢？错误？警告？还是你的狗跑了？ - Jaromanda X

欢迎来到 Stack Overflow，请在本站阅读有关如何提问和如何创建最小、完整且可验证的示例的内容。在提问之前，请务必具体说明问题，并尽力解决。在这种情况下，您没有提及错误，因此我们无法知道出了什么问题。 - Teocci

顺便提一下，你的结构必须像这样 // 发送 PUT 请求 axios({ method: 'put', url: 'http://localhost:8080/cats', data: { data: '这里是一些数据' } }); 查看此网站以获取更多信息 axios - Teocci

Answer 1

我认为你不理解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，因此无法针对其进行指定）。它还指定了创建新猫所需的所有数据。在PUT请求中，我们只包括了要更新的内容。在POST请求中，其他数据尚不存在，因此我们必须指定所有内容。

- Nathan Heffley

Answer 2

 import   { Axios } from 'axios';

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

- Sarthak Raval