Angular2：为xhr调用创建通用加载程序服务

我试图用更多可重用组件构建一个使用angular2的小应用程序。在这里，我想要一个装载程序服务，它会在每调用xhr调用时执行。Angular2：为xhr调用创建通用加载程序服务

对于这一点，这就是我想出了

使用无极

export class SpinnerService { 

    showSpinner = false; 

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string): Promise<any> { 
     this.showSpinner = true; 
     return promiseToWaitFor.toPromise() 
      .then((data) => { this.showSpinner = false; return data; }); 
    } 

}

这是怎么了，我消费我SpinnerService

constructor(private requestService: RequestService, private spinnerService: SpinnerService) { } 

    signin(username: string, password: string) { 
     let url = _.template(API_Constant.LOGIN)({ username: username }); 
     return this.spinnerService.spinnerPromise(this.requestService 
      .makeRequest(url, RequestMethod.Get)) 
      .then(data => { 
       let peoples = data.results; 
       let found = _.find(peoples, (p: any) => p.name.toLowerCase() === username.toLowerCase()); 
       if (found && found.birth_year === password) { 

       } else { 
        return Promise.reject('Invalid username or password'); 
       } 
      }); 
    } 
}

它的工作原理一定程度上罚款。但我对此用法并不十分确信，因为它限制了AuthService消耗Promise。

使用可观察

我在使用而观察到的初学者，所以我不知道它是多么困难或容易实现一个通用的Loader服务。

这是我试过

@Injectable() 
export class SpinnerService { 

    showSpinner = false; 
    public consumer: ReplaySubject<any> = new ReplaySubject(1); 

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) { 
     this.showSpinner = true; 
     return observableToWaitFor.subscribe(
      response => this.consumer.next(response), 
      error => { this.showSpinner = false; }, 
      () => { this.showSpinner = false; } 
     ); 
    } 

}

这会返回一个认购。但有没有办法更新showSpinner没有订阅它。

来源

2017-04-09 Ricky

你可以用'。做（）'执行的副作用，但是这是假定你会无论如何，请订阅Observable。 – martin

@martin如果api调用失败，那么.do（）仍然会被执行？ – Ricky

'do（）'需要三次回调。对于'next'，'error'和'complete'信号，您可以选择想要处理的内容。 – martin

终于得到它working..the只改变我不得不这样做，就是用finally这样

export class SpinnerService { 

    showSpinner = false; 
    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) { 
     this.showSpinner = true; 
     return observableToWaitFor.finally(() => this.showSpinner = false);    
    } 
}

来源

2017-04-09 15:12:36 Ricky

Angular2：为xhr调用创建通用加载程序服务

回答

相关问题