对服务器的Axios PUT请求 [英] Axios PUT request to server

问题描述

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

I read the documentation on axios on PUT request and it seems similar to a GET request. However, there wasn't an example code like GET, but I assume it is similar to how to do a GET request. I seem to have issue making a PUT request using axios. This is what I have so far with a test server that I am using:

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

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

Basically, I am trying to select an item and make changes to it.

推荐答案

我认为您不了解Axios和HTTP请求的工作方式.发出PUT请求时，您必须发送要放入"项目的数据.您似乎认为，当您提出PUT请求时，您会收到退回的物品，然后可以对其进行编辑并自动保存，这是不正确的.

I think you don't understand how Axios and HTTP requests work. When making a PUT request, you have to send the data you want to "put" into the item. You seem to think that when you make a PUT request you will receive the item back which you can then edit and have it save automatically, which is not true.

您拥有一整只猫的图像，并且它们具有名称，图像和有关它们的描述.现在说您要更新由数字1(即它的ID)标识的猫的名字.

Image that you had a whole bunch of cats, and they had names, images, and descriptions about them. Now say you want to update the name of the cat which is identified by the number 1 (that's its ID).

以下是使用PUT请求(通过Axios)更新猫名的示例:

Here is an example of using a PUT request (through Axios) to update that cat's name:

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

看看我如何指定要更新的猫(通过为该猫提供唯一的URL)以及如何提供要更新的特定数据(名称)?现在，您的服务器将看到它收到了对第一只猫的PUT请求，并且数据显示将名称更新为"Tophat Cat".

See how I had to specify which cat I wanted to update (by providing the unique URL for that cat) and also supply the specific data I want updated (the name)? Now it would be up to your server to see that it received a PUT request for the first cat, and that the data says to update the name to "Tophat Cat".

然后服务器将发送响应(可以是从更新成功."到更新的猫的数据的JSON表示形式的任何内容.

Then the server would send a response (it could be anything from "The update was successful." to a JSON representation of the updated cat's data.

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

Remember, a PUT request should only be used for updating data that already exists. If you want to add new data (which is what it looks like a little bit in your example, since you were pointing the request to just /cats without an ID), you should instead use a POST request. POST requests are intended for adding new data and PUT requests are intended for updating existing data.

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

The POST request would look very similar to the PUT request example above, but with some important changes:

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请求中，其他数据尚不存在，因此我们必须指定所有内容.

Now the request is going to just /cats which is typical in a REST API (it can't be pointed at a specific cat ID because the cat doesn't exist yet). It also specifies all the data needed to create a new cat. In the PUT request we only included what we wanted to update. In a POST request the other data doesn't exist yet so we have to specify everything.

这篇关于对服务器的Axios PUT请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！