Лучшая практика о наблюдаемом - PullRequest
Новая
       4

Лучшая практика о наблюдаемом

2 голосов
/ 26 февраля 2020

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

Как вы видите в коде, мне нужно использовать данные, к которым возвращается наблюдаемое me.

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

Если я запускаю циклы for вне подписка, возможно, что нужные мне данные еще не доступны, поэтому я не могу пойти по этому пути. 

ngOnInit(): void {

    this.subscriptionGetRating = this.ratingService.getRating(this.userId).subscribe({ 

      next:data => {

        this.count = data['count'];
        this.rating = data['rating'] / this.count;

        if(this.count == 0){

          this.rating = 0;

          for(let k=0;k<=4;k++){
            this.ratingArray[k] = this.greyStar;
          }

        } else{

          let trunc = Math.trunc(this.rating);

          for(let j=0;j<trunc+1;j++){

            if(this.rating>j && this.rating<j+1){
              this.ratingArray[j] = this.midStar;
            }else {
              if(j!=trunc)
                this.ratingArray[j] = this.yellowStar;
            }

          }

          if (this.rating == Math.floor(this.rating)){
            for(let k=trunc;k<=4;k++){
              this.ratingArray[k] = this.greyStar;
            }
          } else {
            for(let k=trunc+1;k<=4;k++){
              this.ratingArray[k] = this.greyStar;
            }
          }

        }

      },

      error:error => {
        console.error(error);
      }

    });

}

Я sh какая-то хорошая душа дает мне хотя бы один пример того, как я могу решить эта проблема.

Чтение на net Я нашел только примеры, где единственная выполняемая операция - это печать в консоли данных, которые возвращает наблюдаемая (console.log(data);).

Ответы [ 3 ]

3 голосов
/ 27 февраля 2020

1: this.ratingService.getRating (this.userId) .pipe (map (data => {HANDLE DATA HERE}));

2: попытаться свести к минимуму использование подписки в файле TS, использовать канал (map ()), чтобы вернуть его наблюдаемому

2.1: попробуйте прочитать различные типы карт в библиотеке rx js https://blog.angular-university.io/rxjs-higher-order-mapping/

3: Iff вы хотите использовать наблюдаемый asyn c pipe в html файле

4: если вы используете подписку, всегда отписывайтесь в ngondestroy.

1 голос
/ 27 февраля 2020

Я думаю, что вы ищете такой порядок: 

this.obs.subscribe(
  val => { console.log(val) },                 //next callback
  error => { console.log("error") },           //error callback
  () => { console.log("Completed") }           //complete callback
)

Хорошо, значит, вы сказали, что вам нужно сделать для l oop внутри наблюдаемого, вопрос в том, почему ?, но если вы должны. Вы можете использовать канал оператора и затем сопоставить элементы, чтобы сделать что-то вроде этого кода:

iAmAnObservable .pipe (map (value => value.item), // -> для итерации значений в наблюдаемой, помогает вам с изменениями в данных. take (1), // -> предназначен только для использования части массива takeUntil (this._destroyed $));

Если серьезно, это не Хорошая практика, используйте logi c в компонентах, а на самом деле во внешнем интерфейсе, вам нужно попробовать выполнить все операции во внутреннем интерфейсе и просто внедрить результат в приложение angular, если вы тоже хотите увидеть лучшие практики для angular в общем, я рекомендую эту ссылку: https://www.freecodecamp.org/news/best-practices-for-a-clean-and-performant-angular-application-288e7b39eb6f/

0 голосов
/ 27 февраля 2020

Чтобы получить более понятный и редактируемый код, вы можете использовать следующий код (я предполагаю, что getRating отправляет один запрос, и вам нужно дождаться ответа) 

try {
  let data = await this.ratingService.getRating(this.userId).toPromise();
  // here process data using if/for
} catch(e) { 
  // handle error here
}

не забудьте добавить ключевое слово async перед ngOnInit(). Если вы не хотите обрабатывать ошибки, удалите try-catch - тогда ваш код будет еще проще (менее вложенным). Конструкция Async / await предназначена для устранения сложности асинхронного кода (гнездо). Используя его, ваш код больше похож на типичный синхронный код.

...