Angular 5同步HTTP调用：如何等待请求完成后返回并缓存结果

嗨，我明白你的问题啦——你想把耗时的REST请求结果缓存到DataStorageService里，让应用各个部分复用，但因为HTTP请求是异步的，直接同步返回result肯定拿不到值，因为请求还没跑完呢。咱们来一步步改好你的服务：

问题根源 #

你之前的代码里，subscribe和toPromise都是异步回调，当你调用完它们立刻return this.result时，请求还没完成，result还是undefined。所以不能直接返回MyCustomObject，得返回一个Observable（或Promise），让调用者能等待异步操作结束后拿到结果。

推荐实现：Observable版本 #

这个版本更贴合Angular的RxJS生态，而且能轻松处理重复请求的问题：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Service } from './path-to-your-service'; // 替换成你的Service路径
import { MyCustomObject } from './path-to-your-custom-object'; // 替换成你的对象类型路径

@Injectable()
export class DataStorageService {
  private result: MyCustomObject;
  private pendingRequest$: Observable<MyCustomObject>; // 防止重复请求的标记

  constructor(private service: Service) {}

  getResult(): Observable<MyCustomObject> {
    // 1. 如果已有缓存，直接返回包装好的Observable
    if (this.result) {
      return of(this.result);
    }

    // 2. 如果已有请求在进行，返回同一个请求Observable，避免重复调用API
    if (this.pendingRequest$) {
      return this.pendingRequest$;
    }

    // 3. 发起新请求，缓存结果并清理标记
    this.pendingRequest$ = this.service.call().pipe(
      tap((response: MyCustomObject) => {
        this.result = response;
        this.pendingRequest$ = null; // 请求完成后清空标记
      })
    );

    return this.pendingRequest$;
  }
}

组件中调用方式 #

在需要使用结果的组件里，通过subscribe获取异步结果：

import { Component, OnInit } from '@angular/core';
import { DataStorageService } from './path-to-data-storage-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private dataStorage: DataStorageService) {}

  ngOnInit(): void {
    this.dataStorage.getResult().subscribe(result => {
      // 这里就能拿到缓存或新请求的结果了
      console.log('获取到结果:', result);
      // 后续业务逻辑处理
    });
  }
}

备选实现：Promise版本 #

如果你更习惯Promise/async-await的写法，也可以这样实现：

import { Injectable } from '@angular/core';
import { Service } from './path-to-your-service';
import { MyCustomObject } from './path-to-your-custom-object';

@Injectable()
export class DataStorageService {
  private result: MyCustomObject;
  private pendingRequest: Promise<MyCustomObject>;

  constructor(private service: Service) {}

  async getResult(): Promise<MyCustomObject> {
    if (this.result) {
      return this.result;
    }

    if (this.pendingRequest) {
      return this.pendingRequest;
    }

    this.pendingRequest = this.service.call().toPromise();
    const response = await this.pendingRequest;
    this.result = response;
    this.pendingRequest = null;
    return response;
  }
}

组件中调用方式 #

使用async-await简化代码：

async ngOnInit(): void {
  try {
    const result = await this.dataStorage.getResult();
    console.log('获取到结果:', result);
  } catch (error) {
    // 处理请求失败的情况
    console.error('请求出错:', error);
  }
}

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