Javascript 将API请求从使用承诺迁移到可观察（使用axios）

最近，我一直在尝试在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;

从“axios”导入axios；
从“rxjs”导入{Observable}；
导入“/App.css”；
导出类应用程序扩展组件{
状态={
用户：[]
};
componentDidMount（）{
const fetchUserSubscription$=this.fetchUsersObservables（）；
fetchUserSubscription$.Subscripte（数据=>
这是我的国家({
用户：数据
})
);
}
fetchUsers=async（）=>{
const response=等待axios.get(
'https://jsonplaceholder.typicode.com/users'
);
const data=response.data；
this.setState（{users:data}）；
};
fetchUsersObservables=（）=>
新的可观察对象（观察者=>{
axios
.get（'https://jsonplaceholder.typicode.com/users')
。然后（res=>{
观察员：下一步（res.data）；
observer.complete（）；
})
.catch（err=>observer.error（err））；
});
render（）{
const{users}=this.state；
返回(
{users.map（u=>(

{u.name}

))}
);
}
}
导出默认应用程序；

您不必手动将承诺转换为可观察的。对于rxjs>6.0，您可以使用库中的

from

转换函数（注意，对于rxjs<6.0，有

fromPromise

函数）

阅读中的

从数组、类似数组的对象、承诺、可观察对象或类似可观察对象创建可观察对象

优点是您不必编写任何自定义观察者，成功响应、错误响应和取消请求的处理都是为您正确定义的

import { from } from 'rxjs';
const promise = axios.get('https://jsonplaceholder.typicode.com/users')
const observable = from(promise);