vue3でのaxiosの使い方

Vue 3 で axios を使用して HTTP リクエストを送信する方法は、基本的に Vue 2 と同じです。まず、axios ライブラリをインストールする必要があります。

npm install axios

次に、Vue コンポーネントに axios を導入します。

import axios from 'axios';

次に、axios を使用して、Vue コンポーネントのメソッドで HTTP リクエストを送信できます。たとえば、createdライフサイクルフックで GET リクエストを送信するには、次のようにします。

export default {
    
    
  created() {
    
    
    axios.get('https://api.example.com/data')
      .then(response => {
    
    
        // 请求成功，处理响应数据
        console.log(response.data);
      })
      .catch(error => {
    
    
        // 请求失败，处理错误信息
        console.error(error);
      });
  }
}

上記のコードでは、axios.getメソッドを使用して GET リクエストを送信し、.then成功したリクエストの応答データはメソッドによって処理され、.catch失敗したリクエストのエラーメッセージはメソッドによって処理されます。

GET リクエストに加えて、axios.post、などのメソッドを使用して他のタイプのリクエストをaxios.put送信axios.deleteすることもできます。たとえば、POST リクエストを送信するには、次のようにします。

axios.post('https://api.example.com/data', {
    
     name: 'John', age: 25 })
  .then(response => {
    
    
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    
    
    // 请求失败，处理错误信息
    console.error(error);
  });

リクエストを送信する際には、リクエストヘッダーやリクエストパラメータなどを設定することもできます。たとえば、リクエストヘッダーを設定するには、次のようにします。

axios.get('https://api.example.com/data', {
    
    
  headers: {
    
    
    'Authorization': 'Bearer token123'
  }
})
  .then(response => {
    
    
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    
    
    // 请求失败，处理错误信息
    console.error(error);
  });

上記は、axios を使用して Vue 3 で HTTP リクエストを送信する基本的な方法です。特定のニーズに応じて、axios インスタンスをさらに設定したり、リクエストやレスポンスをインターセプトしたりすることができます。axios の詳しい使用方法については、axios の公式ドキュメントを参照してください: https://axios-http.com/

export default {
  created() {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 请求成功，处理响应数据
        console.log(response.data);
      })
      .catch(error => {
        // 请求失败，处理错误信息
        console.error(error);
      });
  }
}

将以上代码修改为post方法 变添加传参

POST メソッドを使用し、パラメーターを追加するように上記のコードを変更するには、次のように変更します。

export default {
    
    
  created() {
    
    
    axios.post('https://api.example.com/data', {
    
     param1: 'value1', param2: 'value2' })
      .then(response => {
    
    
        // 请求成功，处理响应数据
        console.log(response.data);
      })
      .catch(error => {
    
    
        // 请求失败，处理错误信息
        console.error(error);
      });
  }
}

このメソッドのaxios.post最初のパラメータは要求された URL で、2 番目のパラメータは送信するデータオブジェクトです。param1この例では、2 つのパラメータとを追加しparam2、それらの値をそれぞれvalue1とに設定しましたvalue2。

サーバーがこの POST リクエストを受信すると、リクエスト本文のパラメータを通じてこれらの値を取得できます。特定のサーバー側の処理は、バックエンドの実装によって異なります。

リクエストヘッダー情報を追加する

上記のコードにリクエストヘッダー情報を追加するには、axios.postメソッドの 3 番目のパラメータを使用してリクエスト構成を設定します。リクエストの設定では、headers属性を通じてリクエストのヘッダー情報を設定できます。変更されたコード例は次のとおりです。

export default {
    
    
  created() {
    
    
    axios.post('https://api.example.com/data', {
    
     param1: 'value1', param2: 'value2' }, {
    
    
      headers: {
    
    
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_token_here'
      }
    })
      .then(response => {
    
    
        // 请求成功，处理响应数据
        console.log(response.data);
      })
      .catch(error => {
    
    
        // 请求失败，处理错误信息
        console.error(error);
      });
  }
}

この例では、headersプロパティを通じて 2 つのリクエストヘッダー情報を設定します:Content-TypeとAuthorization。実際のニーズに応じて、リクエストヘッダー情報を追加または変更できます。のContent-Type値は、application/jsonリクエスト本文のデータ形式が JSON 形式であることを示しますが、これはAuthorization例であり、your_token_here実際の認可トークンに置き換える必要があります。

ツールコレクション： https: //aiburgeon.com/siteCollection/

ここに画像の説明を挿入

リクエストヘッダー情報を追加する

おすすめ