angular – Ionic 3如何确保在加载视图之前获取db数据

前端之家收集整理的这篇文章主要介绍了angular – Ionic 3如何确保在加载视图之前获取db数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用基于令牌的身份验证,并且令牌已保存在数据库中.

当应用程序启动时,我需要从数据库获取令牌并在进行API调用之前使其可用.

什么是最好的方法

在组件中:

  1. ngOnit() {
  2. storage.get('token').then((val) => {
  3. Make api call here
  4. });
  5. }

或者在共享服务中:

  1. getToken() {
  2. return Promise((resolve,reject)=>{
  3. #if fetched once save in local var and resolve token
  4. #or fetch from DB and resolve token
  5. })
  6. }
  7.  
  8. // On Component
  9. this.sharedService.getToken().then((token)=>{
  10. //Make api call
  11. }

有没有什么办法可以确保在加载视图之前获取DB令牌并存储在共享服务中? storage.get是’ES6承诺’

关注是在加载视图升级到任何引导事件之前加载令牌的责任,因此不需要在每个组件中定义onViewLoad.

我已经以这种方式实现了上述用例.

我已经为CRUD创建了ApiService,如下所示.该代码不言自明,如果您需要更多信息,请告诉我们.

API-service.ts

  1. import { Injectable,} from '@angular/core';
  2. import { Http,Response } from '@angular/http';
  3. import { Observable } from 'rxjs/Observable';
  4. import { Headers,RequestOptions,BaseRequestOptions } from '@angular/http';
  5. import { Storage } from '@ionic/storage';
  6. import { Events } from 'ionic-angular';
  7.  
  8. @Injectable()
  9. export class ApiService {
  10.  
  11. constructor(private http: Http,private storage: Storage,private events: Events) { }
  12.  
  13. createHeader(headers: Headers) {
  14. return new Promise((resolve,reject) => {
  15. this.storage.get('loggedInUser')
  16. .then((token: any) => {
  17. if (token) headers.append('Authorization','token ' + token.token);
  18. resolve(headers);
  19. },err => {
  20. resolve(headers);
  21. });
  22. });
  23. }
  24.  
  25. get(api) {
  26. let header = new Headers();
  27. return Observable.fromPromise(this.createHeader(header))
  28. .map(() => {
  29. let options = new BaseRequestOptions();
  30. options.withCredentials = true;
  31. options.headers = header;
  32. return options
  33. })
  34. .switchMap((options) => this.http.get(api,options))
  35. .catch((err: Error | Response) => {
  36. if (err instanceof Response && err.status === 401) {
  37. this.events.publish('token-expiration');
  38. }
  39. return Observable.throw(err);
  40. });
  41. }
  42.  
  43. post(url,params): Observable<any> {
  44. return new Observable(observer => {
  45. let header = new Headers();
  46. this.createHeader(header)
  47. .then(() => {
  48. let options = new RequestOptions({ headers: header });
  49. this.http.post(url,params,options)
  50. .subscribe(response => {
  51. observer.next(response);
  52. observer.complete();
  53. },(e) => {
  54. observer.error(e);
  55. });
  56. })
  57. })
  58. }
  59.  
  60. delete(url) {
  61. return new Observable(observer => {
  62. let header = new Headers();
  63. this.createHeader(header)
  64. .then(() => {
  65. return this.http.delete(url,{ headers: header,withCredentials: true })
  66. .subscribe(response => {
  67. observer.next(response);
  68. observer.complete();
  69. });
  70. })
  71. });
  72. }
  73.  
  74. }

在这里,我在用户登录app时创建了loggedInUser存储.它也是一个提供者,如下所示.

社会login.ts

  1. import { Injectable } from '@angular/core';
  2. import { ApiService } from "../providers";
  3. import { LocalCacheServiceProvider } from "../local-cache-service/local-cache-service";
  4. import { UserService } from "../user-provider";
  5. import { Storage } from '@ionic/storage';
  6.  
  7.  
  8. @Injectable()
  9. export class SocialLoginProvider {
  10.  
  11. constructor(private apiService: ApiService,private localCacheService: LocalCacheServiceProvider,private userService: UserService,private storage: Storage) {
  12. }
  13.  
  14. //login To App
  15. loginToApp(url: string,data: string) {
  16. this.apiService.post(url,{ access_token: data })
  17. .map((res: any) => res.json())
  18. .subscribe(res => {
  19. this.setUserLocally(res);
  20. });
  21. }
  22.  
  23. //set User Locally
  24. setUserLocally(user) {
  25. this.localCacheService.clearAllKeys().then(() => {
  26. this.userService.setLoggedInUser(user);
  27. this.storage.set('loggedInUser',user);
  28. });
  29. }
  30. }

之后,我可以通过我的任何提供程序(用于CRUD操作)使用上述服务(即ApiService),如下所示.

这是ArticleService.

文章-service.ts

  1. import { Injectable } from '@angular/core';
  2. import { Observable } from "rxjs/Observable";
  3. import 'rxjs/add/operator/map';
  4. import { config } from '../config/config';
  5. import { ApiService } from './api-service';
  6.  
  7.  
  8. @Injectable()
  9. export class ArticleService {
  10.  
  11. constructor(private apiService: ApiService) {
  12. }
  13.  
  14. getBookById(id) {
  15. return this.apiService.get(`${config.getBookById}${id}/`).map((res: any) => res.json());
  16. }
  17. }

以上方法对我来说非常好.希望这种方法对你也有帮助.如果你需要更多帮助,请告诉我.

猜你在找的Angularjs相关文章