2016-08-22 4 views
1

В настоящее время я разрабатываю веб-приложение, которое должно загружать набор данных из базы данных SQL (например, некоторые сотрудники или рабочие планы). Каждый раз, когда вы перенаправляетесь к компоненту, и если вы обновляете данные, он будет отправлен на сервер и возвращает какой-то успех или сообщение об ошибке.Angular2 наблюдаемые против обещаний

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

Вот пример моей реализации:

Сотрудник Компонент:

getEmployees(department: any){ 

this.employeesSub = this.employeeManagementService.getEmployees(department).subscribe(
      //Sucess 
      data => {this.employees = data}, 
      //Error 
      err => this.logger.error(err), 
      //Complete 
     () => {this.logger.log('done loading'); 
       } 
    ); 
} 
    ngOnInit(){ 

    this.selectedDepartment = this.ccs.getSelectedDepartment(); 
    //Does the same type of request as getEmployees() 
    this.getDepartments(); 
    this.paramSub = this.route.params.subscribe(
     //Success  
     params => {  
      //doStuff 
      } 
     }, 
     //Error 
     err => this.logger.error(err), 
     //Complete 
     () => {} 
    ); 
} 
    ngOnDestroy(){ 
     this.employeesSub.unsubscribe(); 
     this.paramSub.unsubscribe(); 
    } 

Сотрудник Услуги:

getEmployees(department: string): Observable<Employee[]>{ 
    let method = "getEmployees"; 
    let body = JSON.stringify({method, department}); 
    this.logger.log(body); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.url, body, options) 
        .map((res:Response) =>{ 
          this.logger.log(res.json()); 
          return res.json(); 
        }).catch(this.handleError); 
} 

Я знаю, что это, возможно, было предложено здесь часто. Но я действительно не уверен в различии, даже если я прочитаю все больше и больше сообщений, я не получу его. Может ли кто-нибудь потратить некоторое время и помочь мне?

ответ

3

Отказаться от подписки немного избыточно, потому что наблюдаемый, возвращаемый с this._http.xxx(), закрывается после первого события, что приводит к тому, что подписка будет отменена в любом случае.

Чтобы гарантировать, что на вашей стороне вы также можете использовать this._http.xxx().first().subscribe(...). Таким образом, подписка закрывается после первого события независимо от того, сколько событий отправляется отправителю.

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

Если вы хотите, чтобы код был выполнен после поступления данных, вам необходимо переместить этот код в subscribe(...), map(...) или какой-либо другой наблюдаемый оператор.

+0

Благодарим за быстрый ответ. Я изменил свои подписки и добавил '.take (1)' каждому из них. Я уже пытался поместить оставшуюся часть кода инициализации в «завершенную» часть первого подписанного наблюдаемого. Кажется, это работает, но я думаю, что это действительно уродливое решение. Разве нет другого пути? – moessi774

+0

Я действительно не понимаю наблюдаемых операторов. Я думал, что они предназначены только для «малых» операций с возвращенным результатом. – moessi774

+1

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