最近,我一直在尝试在React应用中使用rxjs提出API请求,这是我想出的解决方案。
您对此有何看法?
我应该跟进一些好的做法吗?
如果有什么好的解决方案,请告诉我。
import axios from 'axios';
import { Observable } from 'rxjs';
import './App.css';
export class App extends Component {
state = {
users: []
};
componentDidMount() {
const fetchUserSubscription$ = this.fetchUsersObservables();
fetchUserSubscription$.subscribe(data =>
this.setState({
users: data
})
);
}
fetchUsers = async () => {
const response = await axios.get(
'https://jsonplaceholder.typicode.com/users'
);
const data = response.data;
this.setState({ users: data });
};
fetchUsersObservables = () =>
new Observable(observer => {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
observer.next(res.data);
observer.complete();
})
.catch(err => observer.error(err));
});
render() {
const { users } = this.state;
return (
<div className="App">
{users.map(u => (
<ul key={u.id}>
<li>{u.name}</li>
</ul>
))}
</div>
);
}
}
export default App;
您不必将诺言手动转换为可观察的。对于rxjs> 6.0,可以使用库中的from
转换函数(请注意,对于rxjs <6.0,有fromPromise
函数)。
阅读有关from
here in the documentation的信息。
根据数组,类似数组的对象,Promise,可迭代对象或类似Observable的对象创建一个Observable。
import { from } from 'rxjs';
const promise = axios.get('https://jsonplaceholder.typicode.com/users')
const observable = from(promise);
优点是您不必编写任何自定义观察者,为您正确定义了成功响应,错误响应和取消请求。