Axios PUT 请求到服务器

IT技术 javascript reactjs axios put
2021-05-14 16:26:03

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

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

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

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);
  });

现在请求将发送到/catsREST API 中的典型请求(它不能指向特定的猫 ID,因为猫尚不存在)。它还指定了创建新猫所需的所有数据。在 PUT 请求中,我们只包含了我们想要更新的内容。在 POST 请求中,其他数据尚不存在,因此我们必须指定所有内容。