Хобрук: Ваш путь к мастерству в программировании

Angular Observable время от времени подписывается несколько раз

Я вижу, что есть много вопросов, уже заданных по этой проблеме, но все еще не могу найти правильное решение.

У меня есть служба для http-запроса и подписки в компоненте.

Он иногда подписывается несколько раз и отправляет несколько http-запросов.

Иногда он работает нормально, поэтому я не уверен, от чего это зависит, вызывается ли он несколько раз или нет.

http-запрос вызывается 3 раза

Первый вариант проверки. (Я не уверен, что это требуется или это из-за политики CORS. Есть ли способ избежать этого?)

первый запрос

А затем следующие два запроса одинаковы и возвращают значения дважды.

Это большая беда для меня.

Это мой сервис и код компонента.

сервис.тс

getPartners(): Observable<Partner[]> {
    return this.http.get<Partner[]>(SERVER_API_URL + `api/partners`);
  }

компонент.ts

this.partnerService.getPartners()
    .pipe(first())
    .subscribe(partners => {
      this.partners = partners;
    });

Как я могу это исправить? Заранее спасибо.

angular angular5
17.02.2019

Ответы:


1

Первый звонок из-за вашего запроса не простой. Простой запрос - это те, кто соответствует следующему:

  • ПОЛУЧИТЬ / ГОЛОВА / ПОСТ
  • Использует всего несколько значений для заголовков: например. Content-type, Accept-Language, Accept и т. д. (см. список в Интернете)
  • не используется ReadableStream.
  • и т.д...

Это означает, что если вы, например (типичный случай) используете аутентификацию, вводя заголовок авторизации в HTTP-запрос, этот вызов превратится в НЕ ПРОСТОЙ вызов и вызовет предварительный вызов, предшествующий исходному (это вызов OPTIONS) . Который автоматически запускается браузером, и вы не можете его остановить/пропустить.

17.02.2019
  • Спасибо за ответ, @alejoko 17.02.2019
  • Итак, каково точное решение для множественной подписки? 17.02.2019
  • хм, я не знаю, почему звонит дважды после опций .. где вы размещаете сервисный вызов? при инициализации? 17.02.2019
  • Нет, в методе. 17.02.2019
  • onScroll(reachedEnd) { if (reachedEnd) { this.getPartners(); this.appService.setReachedEnd (ложь); } } Служба вызывается в методе getPartners(). 17.02.2019
  • Итак ... я предполагаю, что этот метод вызывается дважды в этом методе-оболочке ... вы пытались поместить журнал консоли сразу после «if (reachedEnd)»? 17.02.2019
  • Таким образом, чтобы защитить запись метода, инициализируйте логическое свойство с именемreachedEndCall : boolean = false; в начале урока. и используйте эту опору в качестве запирающейся двери следующим образом: onScroll(reachedEnd) { if (reachedEnd && !this.reachedEndCall) { this.getPartners(); this.reachedEndCall = истина; this.appService.setReachedEnd (ложь); } } 17.02.2019
  • И просто присвойте обратно значение false подписке, когда у вас есть данные: 17.02.2019
  • В консоли логируется 3 раза точно. Так что я думаю, вы правы. 17.02.2019
  • Я попробую это. Спасибо за помощь. @алейоко 17.02.2019
  • Первый запрос (называемый предварительной проверкой) всегда будет выполняться из-за политики CORS, как упомянул alejoko. Причина, по которой это происходит, заключается в том, что браузеру необходимо опросить веб-сайт, чтобы выяснить, какие глаголы REST поддерживаются (GET, PUT, POST, DELETE, PATCH...). взять только первый результат, например, pipe(take(1)). Я бы посоветовал сначала использовать команду take over. 18.02.2019
    • Новые материалы
    Решения DBA Metrix
    DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..
    Начало работы с Блум
    Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...