Reactにおける非同期データ取得の実現方法

Reactにおける非同期データ取得の方法には、以下のようなものがあります。

1. 持ってきて
2. 取得する
3. componentDidMount
4. とりにいく

class MyComponent extends React.Component {
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 在这里处理获取到的数据
})
.catch(error => {
// 处理请求错误
});
}
render() {
return <div>My Component</div>;
}
}

1. npm install axios

import React, { useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => {
// 在这里处理获取到的数据
})
.catch(error => {
// 处理请求错误
});
}, []);
return <div>My Component</div>;
}

1. 非同期/待機
2. async/await
3. 非同期/待機

class MyComponent extends React.Component {
async componentDidMount() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 在这里处理获取到的数据
} catch (error) {
// 处理请求错误
}
}
render() {
return <div>My Component</div>;
}
}

上記は、非同期でデータ要求を実現する一般的な3つの方法です。適切な方法の選択は、使用環境や個人的な好みによります。