🏆RxJs合并接口应用案例

前端小鑫同学

发布于 2022-12-26 09:26:04

6310

发布于 2022-12-26 09:26:04

文章被收录于专栏：小鑫同学编程历险记小鑫同学编程历险记

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

实验目标：

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

环境及依赖：

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": ""
     }
 ]
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法