Ionic 4 http.get.subscribe 不存储值

Question

所以这可能是重复的或者什么的，但到目前为止我找不到任何简单明了的东西，所以我只是想问一下。

我有一些简单的代码如下：

  fetchData() {
    let dataArray: Array<any> = [,,,];
    this.prepareDataRequest()
    .subscribe(data => {
      this.dataArray[0] = JSON.parse(JSON.stringify(data["results"]));
      this.dataArray[1] = Object.keys(JSON.parse(JSON.stringify(data["results"]))).length;
      console.log(this.dataArray[0]);
    },
    err => {
      this.dataArray[2] = `Error --> Status: ${err.status}, Message: ${err.statusText}`;
    });
    return this.dataArray;
  }

  prepareDataRequest() {
    const dataUrl = 'https://randomuser.me/api/?results=10&inc=gender,name,nat,email,phone,id';
    return this.http.get(dataUrl);
  }

console.log(this.dataArray[0]); 完美运行，但 return 是空的。到目前为止，我发现这是因为它在获取项目之前执行 return this.dataArray;。

但是我该如何解决呢？ 'wait for everything to be stored before you return' 有简单的表达方式吗？还是我这样做完全错误（可能是 xD）？

我已经尝试了一些异步和其他东西，但我对此有点陌生，所以并不顺利。

Answer 1

你做错了，你需要return一个可观察的：

fetchData() {
  return this.prepareDataRequest().pipe(
    pluck('results'),
    catchError(err => `Error --> Status: ${err.status}, Message: ${err.statusText}`),
  );
}

someConsumerFunction() {
  fetchData().pipe(
    // do optional processing here
  ).subscribe(
    results => console.log(results),
    err => console.log(err),
  );
}

或者如果您想等待完成并使用异步和 Promise：

async fetchData() {
  try {
    const data = await this.prepareDataRequest().pipe(
      first(),
    ).toPromise();

    return data.results;
  } catch (err) {
    return `Error --> Status: ${err.status}, Message: ${err.statusText}`;
  }
}

但第一种方法更好，因为您可以更灵活地在消费者端处理数据。

Answer 2

您正在订阅范围之外返回结果，因此 dataArray 尚未初始化。

您需要这样更改您的 fetchData() 方法：

  fetchData() {
    let dataArray: Array<any> = [, , ,];
    this.prepareDataRequest()
      .subscribe(data => {
          this.dataArray[0] = JSON.parse(JSON.stringify(data["results"]));
          this.dataArray[1] = Object.keys(JSON.parse(JSON.stringify(data["results"]))).length;
          console.log(this.dataArray[0]);
          // return your dataArray here
          return this.dataArray;

        },
        err => {
          this.dataArray[2] = `Error --> Status: ${err.status}, Message: ${err.statusText}`;
        });
  }

此外，当您只使用 dataArray 字段时，我对 dataArray 局部变量的声明感到有点困惑。也许那里不需要。

Ionic 4 http.get.subscribe 不存储值

Ionic 4 http.get.subscribe doesn't store value

angular

typescript

ionic-framework

http-get

subscribe