Ionic ngOnit在app.component.ts异步函数完成之前开始执行-仅在web硬刷新时

l7wslrjt  于 2023-04-18  发布在  Ionic
关注(0)|答案(1)|浏览(127)

执行此:

async initialize() {
        try {
          // Check connections consistency
          await this.sqliteService.checkConnectionConsistency().then(async r => {
            console.log(templateAppDataSource.isInitialized)
            if (!templateAppDataSource.isInitialized) {
              await templateAppDataSource.initialize().then(async _ => {
                for (const dataSource of [templateAppDataSource]) {
                  const database = String(dataSource.options.database);
                  if (!dataSource.isInitialized) {
                    // initialize the DataSource
                    await dataSource.initialize();
                    console.log(`*** dataSource has been initialized ***`)
                    // run the migrations
                    await dataSource.runMigrations();
    
                    console.log(`*** dataSource runMigration has been run succesfully ***`)
                    // load the data for this datasource
                    console.log(`*** datasource and database has has been initialized ***`)
                    // }
                    if (this.sqliteService.getPlatform() === 'web') {
                      // save the databases from memory to store
                      await this.sqliteService.getSqliteConnection().saveToStore(database);
                      console.log(`*** inORMService saveToStore ***`)
                    }
                  }
                  console.log(`DataSource: ${database} initialized`);
                }
    
    
                this.isOrmService = true;
              })
    
    
            } else {
              console.log("Connection Already Extrablsihed ")
            }
          });
    
          // Loop through your DataSources
    
    
        } catch (err) {
          console.log(`Error: ${err}`);
        }
      }

当应用程序第一次加载时运行正常,但是在刷新页面时,initialize()方法在第一个await的中途跳出,并在其他页面上触发ngOnit
ngOnit正在获取一些数据,而db尚未初始化,因为async函数尚未完成初始化?
有什么想法吗

fcg9iug3

fcg9iug31#

这是一个基于您的代码和上下文的大胆猜测,但您可以尝试使用服务来初始化DB并知道它何时准备就绪。它可能是这样的:
src/app/services/database-init.service.ts

// omitting imports for clarity

@Injectable({ providedIn: 'root' })
export class DatabaseInitService {
  private readonly _dbIsReady$ = new BehaviorSubject(true);
  readonly dbIsReady$ = this._dbIsReady$.asObservable();

  // omitting DI for clarity

  async initAsync() {
    // the process of initialization

    this._dbIsReady$.next(true);
  }
}

src/app/app.component.ts

// imports, code...

export class AppComponent implements OnInit {
  constructor(/* some imports*/, private dbInitService: DatabaseInitService) {}

  ngOnInit() {
    await this.dbInitService.initAsync();
  }
}

现在你可以这样做:

// imports, code...

export class MyComp implements OnInit, OnDestroy {
  private readonly destroy$ = new Subject<void>();
 
  // you can use the reactive approach like this:
  message$ = this.dbInitService.dbIsReady.pipe(
    filter(Boolean), // this will ensure that you have a true value here before continuing
    map(() => 'Hello there!'),
    takeUntil(this.destroy$)
  );
  
  messageBis!: string;

  private _subscription!: Subscription;

  constructor(private dbInitService: DatabaseInitService) {}

  ngOnInit() {
    // or you can use a subscribe
    this._subscription = this.dbInitService.dbIsReady$.subscribe((value) => {
      if (!value) return;

      this.messageBis = 'General Kenobi';
    })
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();

    // Note that you don't need this Subject and these lines if you choose the "subscribe" way.
    this._destroy$.next();
    this._destroy$.complete();
  }
}

这种方式不是很“开发友好”,因为你必须确保数据库在做任何事情之前已经准备好了。它也是非常“防故障”的,因为我们可以想象一个函数,它会定期确保数据库仍然正常,如果不正常,它会更新dbIsReady$可观察数据。通过这种方式,你可以通知用户发生了什么错误,然后按下reload。
注意你也可以用一个微调器来“阻止”UI,例如直到数据库准备好。这将确保当用户浏览应用程序时,数据库被正确初始化。有很多方法可以做到这一点。使用Google ;)

相关问题