Axios PUT请求服务器

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请求时,您必须将要"放入"的数据发送到项目中.您似乎认为当您发出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中的典型请求(它不能指向特定的cat ID,因为cat还不存在).它还指定了创建新cat所需的所有数据.在PUT请求中,我们只包含了我们想要更新的内容.在POST请求中,其他数据尚不存在,因此我们必须指定所有内容.