將 API 請求從使用承諾遷移到可觀察（使用 axios）

Question

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

Answer 1

您不必手動將您的承諾轉換為可觀察的。 對於 rxjs > 6.0，您可以使用庫中的from轉換函數（注意 rxjs < 6.0 有fromPromise函數）。

在文檔中from這里閱讀。

從數組、類似數組的對象、Promise、可迭代對象或類似 Observable 的對象創建一個 Observable。

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

優點是您不必編寫任何自定義觀察者，處理成功響應、錯誤響應和取消請求都為您正確定義。