Angular – APP_INITIALIZER – Promise vs Observable

前端之家收集整理的这篇文章主要介绍了Angular – APP_INITIALIZER – Promise vs Observable前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有基于Angular v4的应用程序.场景很简单 – 我需要在应用程序启动之前从服务器加载一些设置.为此,我使用APP_INITIALIZER:
{
  provide: APP_INITIALIZER,useFactory: init,deps: [SettingsService],multi: true
}

export function init(config: SettingsService) {
   return () => config.load_one();
}

//import declarations    
@Injectable()
export class SettingsService {
  constructor(private http: HttpClient) { }

  load_one(): Promise<boolean> {
    return new Promise<boolean>((resolve) => {
        this.http.get('url').subscribe(value => {
            console.log('loadSettings FINISH');
            resolve(true);
        });
    });
  }

  load_two(): Observable<any> {
    const promise = this.http.get('url');

    promise.subscribe(value => {
        console.log('loadSettings FINISH');
    });

    return promise;
  }
}

在应用程序的某个地方,我有一个名为manageSettings()的函数(其代码目前无关紧要),这需要初始化来自SettingsService服务的数据.

事情就是这样 – 当我使用函数load_two()时,应用程序不会等到它完成:

app-root constructor
manageSettings()
loadSettings FINISH

当我使用函数load_one()时它工作正常:

loadSettings FINISH
app-root constructor
manageSettings()

谁能解释为什么会这样?

load_one工作和load_two的原因并不简单:Angular只会等待Promises;不是观察者.

在查看docs,博客文章,教程等时,很难找到关于APP_INITIALIZER是否支持返回Observable的明确答案.很明显它确实支持Promises – e.g.

Angular will delay the initialization if the function returns a promise until the promise resolution.

为了确保,您实际上可以看到Angular code正在做什么:

if (isPromise(initResult)) {
    asyncInitPromises.push(initResult);
}

其中isPromise定义如下:

export function isPromise(obj: any): obj is Promise<any> {
    // allow any Promise/A+ compliant thenable.
    // It's up to the caller to ensure that obj.then conforms to the spec
    return !!obj && typeof obj.then === 'function';
}

APP_INITIALIZER代码中没有对Observable的引用;只是承诺.

原文链接:https://www.f2er.com/angularjs/141396.html

猜你在找的Angularjs相关文章