Angular subscribe内按联网状态if/else赋值变量返回undefined如何解决？

根因分析 #

返回undefined是异步执行顺序导致的：

• this.onlineService.isOnline$.subscribe() 的回调是异步触发的，JS引擎不会等待回调执行完成，会直接执行后续的return result逻辑，此时回调还没运行，result自然是未赋值状态
• 离线分支的错误写法：你将subscribe的返回值（Subscription订阅对象）赋值给了result，就算回调执行完成，返回的也不是你需要的业务数据，和在线分支返回Observable的逻辑也不统一

正确实现代码 #

我们不需要手动subscribe网络状态流，直接用RxJS的switchMap高阶操作符，根据网络状态切换到对应的业务数据流，最后返回拼装完成的Observable即可：

import { switchMap, take } from 'rxjs/operators';
import { throwError } from 'rxjs';

public scan(formData: Object): Observable<any> {
  const url = this.remoteUrl;
  // 直接返回网络状态流的衍生流
  return this.onlineService.isOnline$.pipe(
    // 取一次当前网络状态即可，避免后续网络变更重复触发逻辑，如果需要监听状态变化可删除该行
    take(1),
    // 根据在线状态切换不同的业务流
    switchMap(isOnline => {
      if (isOnline) {
        console.log('services is online connected');
        // 在线场景返回http请求Observable
        return this._http.post(url, formData, { headers: headers })
          .pipe(
            catchError(error => {
              if (error.status === 401 || error.status === 403) {
                // 自行补充权限错误处理逻辑
              }
              return throwError(() => error);
            })
          );
      } else {
        console.log('services are offline');
        // 离线场景直接返回IndexedDB查询的Observable，不要在这里subscribe
        return this.dbService.getByIndex('safety', 'code', formData['trafoStation']);
      }
    })
  );
}

调用方式 #

在需要使用scan方法的地方订阅返回的Observable，即可拿到统一的业务结果：

this.scan(你的表单数据对象).subscribe({
  next: (res) => {
    // res就是在线/离线场景返回的业务数据
    console.log('查询结果：', res);
  },
  error: (err) => {
    // 统一处理异常逻辑
  }
});

注意事项 #

• Angular异步场景尽量遵循RxJS流处理规范，不要在函数内部手动订阅后试图返回局部变量保存结果，直接返回拼装好的Observable，由调用方订阅获取结果
• 如果你的isOnline$是会持续推送状态变更的热点流，加take(1)可以保证只取当前的网络状态执行一次逻辑，避免后续网络变化时重复执行业务代码
• 离线分支不要提前subscribe数据库查询方法，直接返回对应的Observable即可，switchMap会自动处理流的订阅和结果传递

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