🏆RxJs合并接口应用案例

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」。

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

实验目标：

将来自不同接口的数据合并到一个字段中使用。

环境及依赖：

1. vite：^2.6.4；
2. rxjs：6.6.6；
3. axios：^0.24.0；
4. vue3+ts（Angular默认支持RxJs，Vue默认不配置RxJs相关内容，所以更能体现创建类的操作符）；
5. 数据来源：JSONPlaceholder。

创建操作符：

1. from：核心操作，没有Observable对象就无从谈起响应式编程，from操作符将接口返回的Promise对象（像Observable对象）转为Observable对象。

合并操作符：

1. zip：
   1. 特点：拉链式组合（一对一组合）；
   2. 目的：将两个接口的结果按合并顺序存在数组中。

过滤操作符：

1. filter：查看数据是否都正常返回，期间使用数组的every函数保证每个接口状态均为200。

转换操作符：

1. map：将接口返回的巨型数据只保留业务相关的data内容返回。

实现过程：

1. 导入相关依赖：

import axios from 'axios'
import { from, zip } from 'rxjs';
import { filter, map } from 'rxjs/operators';

2. 将接口返回的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'));

3. 定义接收对象：

let response = null;

4. 通过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);
})

5. 合并结果展示：

{
    "userId": 1,
    "id": 1,
    "title": "",
    "completed": false,
    "comments": [
        {
            "postId": 1,
            "id": 1,
            "name": "",
            "email": "",
            "body": ""
        }
    ]
}

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。