web-dev-qa-db-ja.com

サーバーへのAxiosPUTリクエスト

PUTリクエストのaxiosに関するドキュメントを読みましたが、GETリクエストに似ているようです。ただし、GETのようなサンプルコードはありませんでしたが、GETリクエストの実行方法と似ていると思います。 axiosを使用してPUTリクエストを行う際に問題が発生したようです。これは、私が使用しているテストサーバーでこれまでに持っているものです。

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

基本的に、アイテムを選択して変更しようとしています。

javascriptreactjsaxios
3
jann

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リクエストを受信したこと、および名前を「TophatCat」に更新するようにデータが指示していることを確認するのはサーバー次第です。

次に、サーバーは応答を送信します（「更新は成功しました。」から、更新された猫のデータの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を指すことはできません）。また、all新しい猫を作成するために必要なデータも指定します。PUTリクエストには、更新したいものだけを含めました。POSTリクエストには、他のデータは含まれていません。まだ存在しないので、すべてを指定する必要があります。

10
Nathan Heffley