Что мне делать с Observable, полученным с помощью rxjs.from после подписки на вывод?

Question

Я просмотрел различные веб-страницы, в том числе вопрос переполнения стека: Как получить данные из наблюдаемой в angular2

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

Response {type: "cors", url: "https://reqres.in/api/users?page=1", redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://reqres.in/api/users?page=1"
__proto__: Response

Я могу получить тело Observable, используя body(), ноэто просто возвращает объект ReadableStream, а не ожидаемую строку JSON?

Вот мой код.

 const data = from(fetch('https://reqres.in/api/users?page=1'));

    data.subscribe({
      next(response) {
        console.log(response);
        },
      error(err) { console.error('Error: ' + err); },
      complete() { console.log('Completed'); }
    });

Что мне нужно сделать, чтобы получить строку JSON, котораянаходится в указанной конечной точке, так что я действительно могу что-то с этим сделать.Мне нужно сопоставить поток с объектом или чем-то еще?

Answer 1

Я просто не уверен, почему вы используете from здесь. Я предполагаю, что все, что вам нужно здесь, это нажать на URL API и получить от него данные.

Если это действительно так, вы можете просто использовать метод get для HttpClient, который вам нужно будет ввести в качестве зависимости в вашем Компоненте.

Кроме того, чтобы использовать HttpClient, вам необходимо добавить HttpClientModule в массив imports вашего модуля.

Если вы действительно следуете этому, ваш код может быть преобразован следующим образом:

constructor(private http: HttpClient ) {}

....

getData() {
  this.http.get('https://reqres.in/api/users?page=1').subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );
}

Если вы все еще хотите использовать from и fetch, вам придется сделать то, что предложил m1gu3l.

const data = from(fetch('https://reqres.in/api/users?page=1').then(res => res.json()))
  .subscribe(
    response => console.log(response),
    err => console.error('Error: ' + err),
    () => console.log('Completed')
  );

Но тогда это то, что Http делал во времена Angular 4.3 и предыдущих версий Angular, но в конечном итоге было признано устаревшим в пользу HttpClient, где вам на самом деле не нужно вызывать метод json чтобы получить точные данные ответа.

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

Если вы используете fetch () вместо HTTPClient Angular, вам нужно преобразовать его в JSON -

const data = from(fetch('https://reqres.in/api/users?page=1'));

data.map(res => res.json()).subscribe(json =>{
  console.log(json);
});

Answer 3

fetch возвращает Promise с Response. Вы можете использовать метод json () .

const data = from(
    fetch('https://reqres.in/api/users?page=1')
        .then(r => r.json())
);