Перенос запроса API с использования обещаний на наблюдаемые (с использованием ax ios) - PullRequest
Новая
       9

Перенос запроса API с использования обещаний на наблюдаемые (с использованием ax ios)

0 голосов
/ 01 марта 2020

В последнее время я пытался получить запросы API, используя rx js в приложении реагирования, и это решение, которое я придумал.

Что вы думаете об этом?

Есть ли хорошие практики, которым я должен следовать?

Если есть какие-либо хорошие решения, пожалуйста, дайте мне знать. 

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 Ответ

1 голос
/ 01 марта 2020

Вам не нужно конвертировать свои обещания вручную в наблюдаемые. Для rx js> 6.0 вы можете использовать функцию преобразования from из библиотеки (обратите внимание, что для rx js <6.0 есть функция <code>fromPromise).

Читать о from здесь, в документации .

Создает Observable из массива, массива-подобного объекта, Promise, итерируемого объекта или Observable-подобного объекта. 

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

Преимущество заключается в том, что вам не нужно писать какого-либо настраиваемого наблюдателя, обработка ответов об успешном завершении, ответов об ошибках и запроса отмены - все правильно определены для вас.

...