将 API 请求从使用 promise 迁移到 observable（使用 axios）

Posted 2023-03-13

【中文标题】将 API 请求从使用 promise 迁移到 observable（使用 axios）

【英文标题】：Migrate a API request from using promises to observable (using axios)

【发布时间】：2020-06-13 17:32:38

【问题描述】：

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

【参考方案1】：

您不必手动将您的 Promise 转换为 observables。对于 rxjs > 6.0，您可以使用库中的 from 转换函数（注意对于 rxjs fromPromise 函数。

了解from here in the documentation。

从 Array、类数组对象、Promise、可迭代对象或类 Observable 对象创建 Observable。

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

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