实验目标：
将来自不同接口的数据合并到一个字段中使用。
环境及依赖：
- vite：
^2.6.4； - rxjs：
6.6.6； - axios：
^0.24.0； - vue3+ts（Angular默认支持RxJs，Vue默认不配置RxJs相关内容，所以更能体现创建类的操作符）；
- 数据来源：JSONPlaceholder。
创建操作符：
- from：核心操作，没有Observable对象就无从谈起响应式编程，from操作符将接口返回的Promise对象（像Observable对象）转为Observable对象。
合并操作符：
- zip：
- 特点：拉链式组合（一对一组合）；
- 目的：将两个接口的结果按合并顺序存在数组中。
过滤操作符：
- filter：查看数据是否都正常返回，期间使用数组的
every函数保证每个接口状态均为200。
转换操作符：
- map：将接口返回的巨型数据只保留业务相关的data内容返回。
实现过程：
- 导入相关依赖：
import axios from 'axios' import { from, zip } from 'rxjs'; import { filter, map } from 'rxjs/operators'; 复制代码
- 将接口返回的promise对象转换为observable对象：
const observable1 = from(axios.get('https://jsonplaceholder.typicode.com/todos/1')); const observable2 = from(axios.get('https://jsonplaceholder.typicode.com/posts/1/comments')); 复制代码
- 定义接收对象：
let response = null; 复制代码
- 通过Rxjs的相关操作符进行数据处理：
// 合并两个observable对象 zip(observable1, observable2) // 预处理 .pipe( // 过滤数据：要求所有的接口状态必须为200 filter(res => res.every(res => res.status === 200)), // 仅返回业务数据以供使用 map(res => res.map(res => res.data)), ).subscribe(res => { // 将两次请求的数据合并到response对象中 response = { ...res[0], comments: res[1], } console.log(response); }) 复制代码
- 合并结果展示：
{ "userId": 1, "id": 1, "title": "", "completed": false, "comments": [ { "postId": 1, "id": 1, "name": "", "email": "", "body": "" } ] }
