React前端如何調用PHP API接口

要在React前端調用PHP API接口，您需要遵循以下步驟：

1. 首先，確保您的PHP API已經創建并正確運行。它應該能夠接收請求、處理數據并返回JSON格式的響應。

2. 在React項目中，安裝Axios庫，這是一個非常流行的HTTP客戶端，用于在JavaScript中發出API請求。打開終端并運行以下命令：

npm install axios

3. 在React組件中，導入Axios庫：

import axios from 'axios';

4. 使用Axios向PHP API發出請求。例如，您可以在componentDidMount生命周期方法中獲取數據：

class MyComponent extends React.Component {
  state = {
    data: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await axios.get('https://your-api-url.com/endpoint');
      this.setState({ data: response.data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
}

5. 在上述示例中，我們使用async/await語法發出GET請求。您還可以使用.then()和.catch()方法處理成功和錯誤情況：

fetchData() {
  axios.get('https://your-api-url.com/endpoint')
    .then(response => {
      this.setState({ data: response.data });
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

6. 根據需要，您可以使用類似的方法（如axios.post()、axios.put()或axios.delete()）來發出POST、PUT和DELETE請求。

注意：請確保將’https://your-api-url.com/endpoint’替換為您的實際PHP API端點。

現在，當React組件加載時，它將從PHP API獲取數據并將其存儲在組件狀態中。您可以根據需要使用此數據進行渲染或處理。