Angular2 Почему Async pipe

Я понимаю, что конвейер Async работает с наблюдаемым и помогает нам загружать async для данных, которые появятся позже.

Однако я могу работать и без использования async. Ниже приведен код

Составная часть

export class XComponent{
     someProp: string;
     someList: string[];
     someFn(){
          this.someService.subscribe(
               data=>{
                    this.someProp = data.prop; 
                    this.someList = data.list;
               }
          );
     }
}

Шаблон

.....

<label>Prop</label>
<span>{{someProp}}</span>
<label>List</label>
<span *ngFor="let item of someList">{{item}}</span>

Приведенный выше код работает для меня без использования async и без каких-либо проблем. Почему я должен использовать async? Это потому, что нам не нужно объявлять переменную для данных, и мы можем использовать непосредственно наблюдаемую (хотя нам в любом случае нужно объявить наблюдаемую вместо данных)?

ИЗМЕНИТЬ

Ниже приведен код, взятый из угловой документации для примера async.

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Вместо этого я могу написать

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time }}</div>'
})
export class AsyncObservablePipeComponent {
  time;
  constructor(){
    setInterval(() => time = new Date().toString(), 1000); 
  } 
}

Мне второй код тоже кажется чистым. (Еще чище)


angular asynchronous angular2-pipe
person Akshay    schedule 23.03.2017    source источник
comment
Асинхронный канал предназначен для предотвращения подписок внутри. Поведение async pipe заключается в том, что он подпишет вашего наблюдателя на возврат данных в вашу переменную цикла, а затем автоматически отменит подписку этого наблюдателя.   -  person Umar Younis    schedule 23.03.2017
comment
@BabarBilal AsyncPipe не отменяет подписку, пока компонент не будет уничтожен. Это описано в документации Angular AsyncPipe.   -  person Mantas    schedule 23.03.2017
comment
Да, но вам не нужно вручную уничтожать его в ngOnDestroy   -  person Umar Younis    schedule 23.03.2017
comment
Нам не нужно вручную уничтожать какой-либо наблюдаемый объект, который был прикреплен к компоненту. Angular делает это автоматически.   -  person Akshay    schedule 23.03.2017
comment
@ Акшай: Это неправда. В некоторых особых случаях вам нужно отказаться от подписки самостоятельно. См. Это: stackoverflow .com / questions / 38008334 /.   -  person Alex Beugnet    schedule 23.03.2017
comment
По сути, вопрос сводится к следующему: почему я должен писать полностью реактивный код? Ну ремонтопригодность, читаемость, управление состоянием. Конечно, вы можете делать это не асинхронно, но в долгосрочной перспективе этим труднее управлять.   -  person Standaa - Remember Monica    schedule 28.03.2019

Ответы (2)


arrow_upward
2
arrow_downward

Что: с помощью AsyncPipe мы можем использовать обещания и наблюдаемые непосредственно в нашем шаблоне, без необходимости сохранять результат в промежуточном свойстве или переменной.

Почему: обычно для того, чтобы отобразить результат обещания или наблюдения, мы должны сделать

  1. Ждите обратного звонка.

  2. Сохраните результат обратного вызова в переменной.

  3. Привяжите к этой переменной в шаблоне.

async упрощает рендеринг данных из обещаний и наблюдаемых. Предположим, что если мы используем наблюдаемые объекты без async, мы должны подписаться на данные от наблюдаемого, и нам нужно отписаться от этого на хуке ngdestroy, чтобы избежать утечек памяти. Но где async позаботится об этом автоматически.

«Асинхронный конвейер подписывается на Observable или Promise и возвращает последнее значение, которое он испустил. Когда выдается новое значение, асинхронный конвейер отмечает компонент, подлежащий проверке на наличие изменений»

Как

`@Component( 
{

selector: 'async-observ',

  template: `
 <div>
  <h5>Async demo</h5>
  <p>{{ observable | async }}</p> 
 </div>
})

class AsyncObservComponent {

    observable: Observable<number>;

    constructor() {

     this.observable = this.getObservable();

   }

  getObservable() {

    return Observable
      .interval(1000)
      .take(5)
      .map((v) => v*v)
   }
person pa1 Raju    schedule 12.04.2018

arrow_upward
1
arrow_downward

Основная причина в том, что при использовании канала async ваш код будет намного чище.

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

В качестве дополнения, согласно Angular docs, AsyncPipe будет принимать только последнее значение, пропущенное наблюдаемым (что является идеальным решением для отображения значения в представлении). Если вы сохраните след самого наблюдаемого в XComponent, тогда вы сможете получать все значения, первые значения и выполнять всевозможные манипуляции с данными.

РЕДАКТИРОВАТЬ: Чтобы поддержать новый пример, который вы дали:

time = Observable.interval(1000).flatMap(() => new Date().toString());
person Mantas    schedule 23.03.2017
comment
Он спрашивает об асинхронной функциональности - person Umar Younis; 23.03.2017
comment
Я могу создать шаблон без асинхронности и использовать только одну переменную для тысячи ключей. Если вы не согласны со мной, то приведите пример. - person Akshay; 23.03.2017
comment
@Akshay, да, вы можете это сделать, если так удобнее и в таком подходе нет ничего плохого. Однако, если вам нужны ранее отправленные данные (кроме последних) или, например, разрешить передачу только некоторых значений на основе настраиваемой логики, вам понадобится наблюдаемый, а не просто переназначение значений в подписке внутри класса. Это просто обеспечивает большую гибкость для обработки данных, а не просто принимает последнее значение. - person Mantas; 23.03.2017