React.js如何與后端API交互

在React.js中，與后端API進行交互通常是通過使用HTTP客戶端庫（如Axios或Fetch API）來實現的。以下是使用Axios和Fetch API與后端API進行交互的基本步驟：

使用Axios

1. 安裝Axios：

   npm install axios
   

2. 發送請求：

   import axios from 'axios';
   
   // 發送GET請求
   axios.get('https://api.example.com/data')
     .then(response => {
       console.log(response.data);
     })
     .catch(error => {
       console.error('There was an error!', error);
     });
   
   // 發送POST請求
   axios.post('https://api.example.com/data', {
     key: 'value'
   })
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error('There was an error!', error);
   });
   
   // 發送PUT請求
   axios.put('https://api.example.com/data/1', {
     key: 'new value'
   })
   .then(response => {
     console.log(response.data);
   })
   .catch(error => {
     console.error('There was an error!', error);
   });
   
   // 發送DELETE請求
   axios.delete('https://api.example.com/data/1')
     .then(response => {
       console.log(response.data);
     })
     .catch(error => {
       console.error('There was an error!', error);
     });
   

使用Fetch API

1. 發送GET請求：

   fetch('https://api.example.com/data')
     .then(response => {
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
       return response.json();
     })
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('There was an error!', error);
     });
   

2. 發送POST請求：

   fetch('https://api.example.com/data', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({
       key: 'value'
     })
   })
   .then(response => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     return response.json();
   })
   .then(data => {
     console.log(data);
   })
   .catch(error => {
     console.error('There was an error!', error);
   });
   

3. 發送PUT請求：

   fetch('https://api.example.com/data/1', {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({
       key: 'new value'
     })
   })
   .then(response => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     return response.json();
   })
   .then(data => {
     console.log(data);
   })
   .catch(error => {
     console.error('There was an error!', error);
   });
   

4. 發送DELETE請求：

   fetch('https://api.example.com/data/1', {
     method: 'DELETE'
   })
   .then(response => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     return response.json();
   })
   .then(data => {
     console.log(data);
   })
   .catch(error => {
     console.error('There was an error!', error);
   });
   

在React組件中使用

你可以在React組件的生命周期方法（如componentDidMount）或使用Hooks（如useEffect）來調用這些API請求。

使用類組件

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  state = {
    data: null,
    error: null
  };

  componentDidMount() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.setState({ data: response.data });
      })
      .catch(error => {
        this.setState({ error: error.message });
      });
  }

  render() {
    const { data, error } = this.state;
    return (
      <div>
        {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
        {error && <div>Error: {error}</div>}
      </div>
    );
  }
}

export default MyComponent;

使用函數組件和Hooks

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        setError(error.message);
      });
  }, []);

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
    </div>
  );
}

export default MyComponent;

通過這些步驟，你可以在React.js應用中輕松地與后端API進行交互。