Axios in を 使用した API との通信 React- ステップバイステップ ガイド

アプリケーションでは React 、API と対話することが一般的な要件です。 は、HTTP リクエストの作成と応答の処理プロセスを簡素化する Axios 人気のあるライブラリです。 このステップバイステップのガイドでは、アプリケーションで を使用して API と通信する JavaScript プロセスについて説明します。 Axios React

 

インストール中 Axios

ターミナルでプロジェクト フォルダーを開き、次のコマンドを実行してインストールします Axios。 npm install axios

次のコードを使用してコンポーネント Axios に インポートします。 React import axios from 'axios'

 

GET リクエスト の送信

リクエストを送信して GET API からデータを取得するには、 メソッドを使用します。 axios.get()

例：

axios.get('https://api.example.com/data')  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

POST リクエスト の送信

リクエストを送信し POST 、データを API に送信するには、 メソッドを使用します。 axios.post()

例：

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

エラーの処理

Axios メソッドを使用した組み込みのエラー処理メカニズムを提供します catch()。

例：

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });  

 

RESTful APIとの統合

Axios GET、 、PUT、DELETE などの HTTP メソッドを指定できるようにすることで、RESTful API をサポートします POST。

例：

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  

 

Axios これらの手順と例に従うことで、アプリケーションで 使用する API と効果的に通信できるようになります React。