Ionic函数返回含__zone_symbol__value的对象，如何获取实际值？

嘿，我来帮你搞定这个问题！你看到的那个{__zone_symbol__state: null...}其实是未完成状态的Promise对象，原因很简单：你的count函数返回的是一个Promise，而Promise是异步的——当你同步执行console.log(count(id))时，HTTP请求还没完成，所以Promise处于pending状态，等请求结束后Promise才会变成resolved状态，值才会更新为3。

问题根源 #

你的代码里有两个可以优化的点：

• 直接同步打印Promise肯定拿不到最终结果，必须用异步方式处理Promise的返回值
• 手动new Promise结合Observable的subscribe写法有点冗余，Angular的HttpClient返回的Observable可以直接转成Promise，写法更简洁规范

解决方案 #

第一步：优化count函数的写法

根据你使用的RxJS版本，选择对应的方式把Observable转成Promise：

RxJS 7+ 推荐用lastValueFrom

import { lastValueFrom } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

count(id, url) {
  // 直接提取data.count并转成Promise
  return lastValueFrom(
    this.http.get(url).pipe(
      map(res => res.json().count)
    )
  );
}

RxJS 6及以下 可以用toPromise()

count(id, url) {
  return this.http.get(url)
    .map(res => res.json().count)
    .toPromise();
}

第二步：正确获取Promise的结果

你不能直接同步打印Promise，需要用以下两种异步方式之一：

方式1：使用.then()回调

count(id).then(result => {
  console.log(result); // 这里会输出你想要的3
});

方式2：使用async/await（更简洁，需在async函数内使用）

// 比如在组件的某个方法里
async getCount() {
  const result = await count(id);
  console.log(result); // 输出3
}

// 调用这个async函数
this.getCount();

为什么原来的代码会显示Promise对象？ #

当你执行console.log(count(id))时，JavaScript会立即打印这个Promise实例的当前状态（pending），而HTTP请求是异步的——等请求完成后，Promise的状态会变成resolved，值更新为3，但此时同步的console.log已经执行完了，所以你看到的是Promise对象的初始状态，后续状态变化是浏览器的控制台动态更新的。

内容的提问来源于stack exchange，提问作者RSA