Angular订阅大对象问题：GET请求获取对象时返回值未定义

你的问题核心在于HTTP请求是异步操作，我来给你拆解一下代码的执行顺序：

1. 你声明了let poly: any;，此时poly的初始值是undefined
2. 调用this.dataService.getCollectionbyId(id).subscribe(...)后，浏览器会发送HTTP请求，但不会等待请求完成，而是直接继续执行后续代码
3. 代码直接走到return poly;，这时候subscribe里的回调函数还没触发（请求还没返回结果），所以返回的还是初始的undefined
4. 等请求完成后，subscribe里的代码才会运行给poly赋值，但这时候return早就执行完了，根本拿不到这个值

修复方案1：返回Observable，让调用方订阅 #

把_getPolygonById改成返回Observable，让调用者在订阅时获取正确的poly值：

private _getPolygonById(id: number): Observable<any> {
  return this.dataService.getCollectionbyId(id).pipe(
    map(data => {
      const res = data.json();
      return JSON.parse(res.string);
    })
  );
}

调用示例：

// 在需要使用poly的地方订阅
this._getPolygonById(你的目标ID).subscribe(poly => {
  // 这里的poly已经有值了，可以正常使用
  console.log(poly);
  // 比如赋值给组件属性用于模板渲染
  this.polygon = poly;
});

修复方案2：用async/await（基于Promise） #

如果你更习惯同步写法，可以把Observable转成Promise，通过async/await处理：

private async _getPolygonById(id: number): Promise<any> {
  const data = await this.dataService.getCollectionbyId(id).toPromise();
  const res = data.json();
  return JSON.parse(res.string);
}

调用示例：

// 注意调用该函数的方法也要标记为async
async loadPolygon() {
  const poly = await this._getPolygonById(你的目标ID);
  console.log(poly);
  this.polygon = poly;
}

额外优化：Angular 6+的HttpClient简化 #

如果你的Angular版本是6及以上，HttpClient的get方法会自动解析JSON响应，不需要手动调用data.json()，可以简化代码：

先修改service：

getCollectionbyId(id: number) {
  console.log("launching request");
  return this.http.get(`api/project-collections/${id}`);
}

再修改_getPolygonById：

private _getPolygonById(id: number): Observable<any> {
  return this.dataService.getCollectionbyId(id).pipe(
    map(res => JSON.parse(res.string))
  );
}

这样代码更简洁高效~

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