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 請求只能用於更新已經存在的數據。 如果您想添加新數據（這在您的示例中看起來有點像，因為您將請求指向沒有 ID 的/cats ），您應該改用 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 請求中，其他數據尚不存在，因此我們必須指定所有內容。

Answer 2

 import   { Axios } from 'axios';

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