Rxjs中take(10)未仅获取10条数据，求原因及解决方法

你这里的take(10)没起到预期作用，核心原因是它的作用对象是Observable的发射事件次数，而非数组内部的元素数量。

你的HTTP请求返回的Observable只会发射一次数据——也就是完整的todos数组。take(10)的逻辑是保留Observable前10次发射的事件，但这里只有1次发射，所以它直接返回了整个数组，不会对数组内部元素做截取。

有两种常用方式实现仅获取10条数据的需求：

方式一：在map操作符中直接截取数组 #

直接在处理数组的map里使用数组原生的slice方法截取前10个元素，这是最直接的方案：

todos: Observable<TodoItem[]>;

constructor(private http: HttpServiceService) {
  this.todos = this.http.get('https://jsonplaceholder.typicode.com/todos');
  this.todos.pipe(
    map((todoList) => 
      todoList.slice(0, 10).map(todo => ({ ...todo, id: todo.id + 10 }))
    )
  ).subscribe(val => console.log(val));
}

方式二：将数组转为单元素Observable流处理 #

如果后续需要对单条todo数据做更多RxJS操作，可以先把数组转成单个元素的Observable流，用take(10)取前10个元素后，再合并回数组：

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

todos: Observable<TodoItem[]>;

constructor(private http: HttpServiceService) {
  this.todos = this.http.get('https://jsonplaceholder.typicode.com/todos');
  this.todos.pipe(
    switchMap(todoList => from(todoList)),
    map(todo => ({ ...todo, id: todo.id + 10 })),
    take(10),
    toArray()
  ).subscribe(val => console.log(val));
}

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