Angular4中如何让函数按参数返回真实/模拟HTTP响应？

嘿，我明白你的问题了——你用Observable.from([])的时候订阅没触发，是因为这个操作符处理空数组时，根本不会发射任何数据就直接完成了，你的next回调自然不会执行。你需要的是让Observable主动发射一个包含空数组的响应，和真实HTTP请求返回的结构对齐。

分情况给出解决方案： #

情况1：你用的是Angular旧版的Http模块（返回Response对象）

真实的HTTP请求返回的是带有body属性的Response对象，所以模拟时要和这个结构一致：

import { of } from 'rxjs';
import { Response } from '@angular/http';

myFunc(x?: any) {
  if (x) {
    return this.http.get('myURL');
  } else {
    // 创建一个body为空数组的模拟Response
    const mockResponse = new Response({ body: [] });
    // 用of操作符把这个模拟对象作为一个数据项发射出去
    return of(mockResponse);
  }
}

情况2：你用的是Angular新版的HttpClient模块（默认返回响应体）

HttpClient会自动提取响应体，所以如果真实请求返回的是数组，直接返回空数组的Observable即可：

import { of } from 'rxjs';

myFunc(x?: any) {
  if (x) {
    return this.http.get<any[]>('myURL');
  } else {
    // of([])会把空数组作为一个数据项发射，订阅的next回调会触发
    return of([]);
  }
}

为什么Observable.from([])不行？ #

Observable.from([])（RxJS 6+里是from([])）会遍历传入的数组，但数组是空的，所以没有任何数据被发射，直接进入complete状态。而of([])是把整个空数组当作一个数据项发射出去，这样你的订阅逻辑就能接收到这个空数组了。

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