Angular中Observable获取数据后执行后续操作的方法

因为HTTP请求是异步操作，subscribe的回调会在请求完成后才触发，而当前do_other_work()是同步执行的，所以会先于数据处理代码运行。你可以通过以下几种方式调整执行顺序：

方式一：将后续操作放入subscribe的回调中 #

直接把do_other_work()移到subscribe的next回调里，放在数据处理逻辑之后，确保它在数据加载完成后执行：

loadData() {
    this.getData().subscribe((data: {}) => {
        do_something_to_data(data);
        // 数据处理完成后执行后续操作
        do_other_work();
    });
}

方式二：使用pipe操作符串联数据流逻辑 #

如果希望把数据处理和后续操作都纳入Observable的数据流管理，可以用以下操作符：

用tap执行同步后续操作 #

tap可以在数据流中插入同步操作，不影响数据流本身，之后在subscribe中执行收尾工作：

loadData() {
    this.getData().pipe(
        tap((data: {}) => {
            do_something_to_data(data);
        })
    ).subscribe(() => {
        do_other_work();
    });
}

用concatMap处理异步后续操作 #

如果do_other_work()本身也是异步操作（比如另一个HTTP请求），concatMap可以保证前一个操作完成后再执行下一个：

loadData() {
    this.getData().pipe(
        tap((data: {}) => {
            do_something_to_data(data);
        }),
        concatMap(() => {
            // 假设do_other_work返回Observable类型的异步操作
            return this.do_other_work();
        })
    ).subscribe(() => {
        // 所有异步操作完成后的收尾逻辑
    });
}

额外注意点 #

如果handleError函数中用到了this（比如调用组件内的其他方法），需要确保上下文正确，否则会出现undefined错误。可以修改getData中的catchError：

getData() {
   return this._api_service.http.get<JSON>(this._url).pipe(
       retry(1),
       catchError((error) => this.handleError(error)) // 用箭头函数绑定this上下文
   );
}

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