在 React 中,可以通過使用 fetch
或者 axios
等庫來調用接口獲取數據。
使用 fetch
的示例代碼如下:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 處理獲取到的數據
console.log(data);
})
.catch(error => {
// 處理錯誤
console.error(error);
});
使用 axios
的示例代碼如下:
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
// 處理獲取到的數據
console.log(response.data);
})
.catch(error => {
// 處理錯誤
console.error(error);
});
在實際開發中,通常會將數據獲取的邏輯放在 React 組件的生命周期方法(如 componentDidMount
)中,以便在組件掛載后立即獲取數據。獲取到的數據可以存儲在組件的狀態中,然后在 render
方法中使用。
例如:
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;
if (error) {
return <div>Error: {error}</div>;
}
if (!data) {
return <div>Loading...</div>;
}
return (
<div>
{/* 使用獲取到的數據渲染組件 */}
</div>
);
}
}
export default MyComponent;
在上述代碼中,組件在掛載后會調用 componentDidMount
方法,該方法中使用 axios
發起請求并將獲取到的數據存儲在組件的狀態中。在 render
方法中根據組件的狀態來渲染不同的內容。