Question

我正在学习Ionic，我有以下功能：

loadPaper(paper){
  this.testFunc();

    console.log('questions', this.questions);
    console.log('paper', paper);

    this.navCtrl.push(this.loadPaperPage, {
        paper: paper,
        questions: this.questions
    });

}

testFunc(){
  this.papersData.getPaper().subscribe(questions => {
    this.questions = questions.questions;
  });
}

我的loadPaper函数调用testFunc()以设置具有所需数据的全局变量。然后我尝试在console.log打印中使用数据，但控制台报告的数据是undefined，而不是我期望的json数据。

除了它不起作用的事实，我相信它不是最好的解决方案。我确实尝试了第二个函数的return数据的首选和标准解决方案但是无效。

我该如何解决这个问题？

Answer 1

testFunc不会保存订阅，也不会返回可观察对象。在应该链接的异步函数中使用subscribe可以被认为是反模式。

可以修改

testFunc来返回一个observable，它的调用者负责订阅它：

testFunc(){
  return this.papersData.getPaper().do(questions => {
    this.questions = questions.questions;
  });
}

loadPaper(paper){
  return this.testFunc().subscribe(questions => {...});
}

如果this.questions未在其他任何地方使用，则可能根本不需要do。如果loadPaper在其他地方被链接，那么在返回订阅而不是可观察之前，它可能与testFunc具有相同的问题。

如果getPaper返回已完成的可观察对象，则可能会尽快切换到承诺，特别是因为可以使用async..await：

testFunc(){
  return this.papersData.getPaper().toPromise();
}

async loadPaper(paper){
  const questions = await this.testFunc();
  ...
}

Answer 2

this.papersData.getPaper().subscribe订阅了一个观察者。订阅块中声明的函数称为异步，仅当observable发出值时。您无法知道observable何时发出值。所以它可以（之后）执行console.log('questions', this.questions);。因此，this.questions的值在执行时没有设置。

ionViewDidLoad(){
  this.subscription = this.papersData.getPaper().subscribe(questions => {
    this.questions = questions.questions;
    let paper = <whatever>;
    this.loadPaper(paper);
  });
}

ionViewWillUnload(){
  if (this.subscription instanceof Subscription) {
    this.subscription.unsubscribe();
  }
}

loadPaper(paper){

    console.log('questions', this.questions);
    console.log('paper', paper);

    this.navCtrl.push(this.loadPaperPage, {
        paper: paper,
        questions: this.questions
    });

}

也许您不希望在加载页面时直接调用loadPaper。然后你可以调整Observable以等待另一个事件（点击页面，鼠标移动等）。

ionViewDidLoad(){
  this.subscription = Observalbe.combineLatest(this.papersData.getPaper(), this.clickEvent).subscribe(data => {
    let questions = data[0];
    let clickEvent = data[1];
    this.questions = questions.questions;
    let paper = <whatever>;
    this.loadPaper(paper);
  });
}

要为更大的项目使用javascript / typescript，您必须学习异步（Callback / Promise / Observable）的工作方式。订阅和可观察对象是rxjs的一部分。

TypeScript函数调用和返回数据

2 个答案: