Ionic 4 http.get.subscribe 不存储价值答案

【问题标题】：Ionic 4 http.get.subscribe doesn't store valueIonic 4 http.get.subscribe 不存储价值
【发布时间】：2023-03-26 04:40:01
【问题描述】：

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

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

  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 this.dataArray;。

但是我该如何解决呢？有没有一种简单的方法可以说“等待所有东西都存储好再回来”？还是我这样做完全错了（可能是 xD）？

我已经尝试了一些异步和东西的东西，但我对此有点陌生，所以一切都没有顺利。

【问题讨论】：

您返回一个空变量，因为这是异步代码。 Subscribe() 监听一个 Observable，它不会按照它的编码顺序执行。你应该阅读一些教程并尝试它们，直到你理解异步代码。

标签： angular typescript ionic-framework http-get subscribe

【解决方案1】：

你这样做的方式不对，你需要返回一个 observable：

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),
  );
}

或者如果你想等待完成并使用 async 和 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}`;
  }
}

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

【讨论】：

【解决方案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 局部变量的声明有点困惑。也许那里不需要。

【讨论】：