Observable 前端防腐层项目实战

474次阅读  |  发布于2年以前

在 [基于 Observable 构建前端防腐策略] 发布后,有一些读者留言对文章中使用 Observable 构建防腐层的典型应用感到困惑,觉得代码中的例子过于简单,不少可以通过 Promise 解决,引入 RxJS Observable 会提高而非降低复杂度。

这种顾虑是完全有道理的,在 RxJS 中可以由 Promise 操作符来替代的场景还有很多,事实上,所有能由 Observable 实现的场景理论上都可以 Promise 来实现,毕竟 RxJS 是基于 JavaScript 构建,整个 Observable 的核心实现也不过只有 100 行 代码。

然而前文的例子只是用来说明防腐层的场景,而并非复杂到一定要使用防腐层的情况。实际业务中的场景不可能只有 2 个接口,3 个组件这样简单。在复杂的业务场景下,基于 Observable 构建的防腐层可以提升我们的代码开发效率,更好的抽象和封装底层接口。以下举几个项目中防腐层的实战场景 ,每个场景均附加了在线示例。

接口稳定提升

将低成功率接口组装抽象为高成功率接口

在线示例:https://stackblitz.com/edit/rxjs-stable-improvement

操作符:retry / retryWhen / delay

有些时候后端接口的成功率较低,但是前端为了保证视图层稳定,需要对这些接口的成功率进行增强。这里,我们使用 Promise 模拟一个成功率只有 50% 的接口,代码如下:

// 成功率 50% 的接口
function unstableAPI(): Promise<boolean> {
  return new Promise((resolve, reject) => {
    if (Math.random() < 0.5) {
      resolve(true);
    } else {
      reject('error');
    }
  });
}

通过 RxJS 的 retry 操作符,我们可以很容易将 50% 成功率的接口组装为成功率 99.9% 的接口,即每次当接口失败时,自动重试最多 10 次。

function stabilizedAPI(): Promise<boolean> {
  return lastValueFrom(
    from(defer(() => unstableAPI())).pipe(retry(10))
  );
}

image.png

实际的业务中,以上代码会导致代码短时间内多次重试,可能会导致接口雪崩。在 RxJS 中我们可以轻松实现错误回退机制,以花费更多时间的代价来获得更大的成功几率。

我们将 stabilizedAPI 的代码修改为以下代码,当发生错误时,等待 1s 后重新发起请求,最多发送 10 次。更完善的 RxJS 退避策略可以参考 Power of RxJS when using exponential backoff 一文。

function stabilizedAPI(): Promise<boolean> {
  return lastValueFrom(
    from(defer(() => unstableAPI())).pipe(
      retryWhen((errors) => errors.pipe(delay(1000), take(10)))
    )
  );
}

image.png

接口时序调整

为启动屏目单独提供加载接口

在线示例:https://stackblitz.com/edit/rxjs-minimal-response-time

操作符:forkJoin / delay

绝大部分的前端应用都会有启动屏幕,启动屏幕中可能包含广告、加载动画或者应用 logo 信息等内容,应用启动屏幕的展示时间通常由以下两个因素决定:

  1. 网络加载耗时 networkDelay: 应用加载所需的关键数据接口,例如用户个人信息的最长返回时间
  2. 页面最小展示时间 minimalDelay: 启动屏幕包含的有效信息需要有一个最短展示时间,防止屏幕闪烁

启动屏幕的展示时间应当由以下逻辑计算:当网络加载耗时小于页面最小展示时间时,将以页面最小展示时间为准,当大于页面最小展示时间时,将网络加载耗时为准。简化公式为:

启动屏幕展示时间 = Max(关键接口加载时间,最短加载时间)

我们使用 Promise 来模拟关键数据返回,其中网络接口延时由 setTimeout 来模拟

function initData(): Promise<{ name: string }> {
  return new Promise((resolve) => {
    const networkDelay = Math.random() * 3000;
    setTimeout(() => {
      resolve({ name: 'lucy' });
    }, networkDelay);
  });
}

通过 forkJoin``delay 等 operator,我们可以组装出给启动屏幕使用的最短返回时间接口

// 初始化数据,返回时间必定大于 minimalDelay ms
function initDataWithMinimalDelay(minimalDelay: number): Promise<{ name: string }> {
  return lastValueFrom(
    forkJoin([
      from(defer(() => initData())),
      of(true).pipe(delay(minimalDelay)),
    ]).pipe(map(([data]) => data))
  );
}

在以上代码中,当 networkDelay 调用时间小于 minimalDelay 时,将以 minimalDelay 为准,当大于 minimalDelay 时,将以 networkDelay 为准。

image.png

接口择优使用

自动选择较快的接口使用

在线示例:https://stackblitz.com/edit/rxjs-race-query

操作符:raceWith

有时相同的数据可以从后端多个接口中获取,我们使用 Promise 模拟快慢两个接口

// 快速接口
function fastAPI(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('fast data');
    }, 1000);
  });
}

// 慢速接口
function slowAPI(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('slow data');
    }, 3000);
  });
}

在实际的使用中,我们无法提前知晓接口的网络情况,通过 raceWith 操作符,我们可以对任意个接口进行封装,自动获取其中最快的那个

function getFasterOne(): Promise<string> {
  return lastValueFrom(
    from(defer(() => fastAPI())).pipe(raceWith(from(defer(() => slowAPI()))))
  );
}

image.png

接口竞态处理

Observable 防腐层自带竞态处理功能

在线示例:https://stackblitz.com/edit/rxjs-race-condition

操作符:exhaustMap / switchMap / concatMap

接口的请求结果返回的顺序不能保证一致,这就要求我们在业务中需要对接口的竞态问题进行处理。Dan Abramov 在 useEffect 完整指南 使用了布尔值来对数据进行处理。但是如果你使用 Observable 构建了防腐层,就会有更简单的方法来处理竞态问题。

我们使用 randomuser.me 的服务与 fromFetch operator 构建一个简单的数据层

function getData() {
  return fromFetch('https://api.randomuser.me/?page=1&results=10').pipe(
    map((data) => data.json())
  );
}

以第一次请求为准

由于防腐层 Observable 的特性,使用 Observable 与 exhaustMap 结合就可以获得与 flag 标注相同的效果,即当前一次请求未返回时,下一次请求会被直接抛弃。

fromEvent(document.getElementById('button'), 'click')
  .pipe(exhaustMap(() => getData()));

image.png

以最后一次请求为准

我们也可以选择以最后一次请求为基准,将之前所有的请求都抛弃,在组件内直接使用 switchMap operator 来保证请求顺序与返回数据一致,fromFetch 中内置了 AbortController 可以将过期但仍未返回的接口置为 canceled 状态。

fromEvent(document.getElementById('button'), 'click')
  .pipe(switchMap(() => getData()));

image.png

image.png

所有请求排队处理

将所有发出的请求排队处理,不丢弃任何一次请求,当上一次请求未返回时,下一次请求进入队列排队。

fromEvent(document.getElementById('button'), 'click')
  .pipe(concatMap(() => getData()));

image.png

高阶数据组装

将高阶数据请求抽象为单个接口

在线示例:https://stackblitz.com/edit/rxjs-high-order-query

操作符:mergeMap / map / forkJoin

有些时候需要二次请求才能获得视图层的数据,例如下图中的数据可能由 getList 与 getStatus 两个接口才能完整获取。当我们需要同步渲染这些数据时,在防腐层中抽象出 getListWithStatus 会是更好的选择。

image.png

我们使用 Promise 模拟出两个接口的内容


// 模拟获取列表数据的接口
function getList(): Promise<
  Array<{
    name: string;
    id: string;
  }>
> {
  return new Promise((resolve) => {
    resolve([
      {
        name: 'John Brown',
        id: '1',
      },
      {
        name: 'Jim Green',
        id: '2',
      }
    ]);
  });
}

// 模拟获取状态接口
function getStatus(id: string) {
  return new Promise((resolve) => {
    if (id === '2') {
      resolve('old');
    } else {
      resolve('young');
    }
  });
}

通过 mergeMapforkJoin,我们可以将高阶的请求直接打平为一阶数组,获得含有 status 列表数据的接口抽象


// 抽象后含有 status 的列表数据
function getListWithStatus() {
  const getList$ = from(defer(() => getList()));
  const getStatus$ = (id: string) => from(defer(() => from(getStatus(id))));
  const data$ = getList$.pipe(
    mergeMap((list) => {
      const queryList = list.map((item) =>
        getStatus$(item.id).pipe(map((status) => ({ ...item, status })))
      );
      return forkJoin(queryList);
    })
  );
  return lastValueFrom(data$);
}

调用 getListWithStatus 返回的数据为

[
    {
        "name": "John Brown",
        "id": "1",
        "status": "young"
    },
    {
        "name": "Jim Green",
        "id": "2",
        "status": "old"
    }
]

总结

Observable 的思想更广泛的应用在于响应式编程,但是其在防腐层构建上同样可以发挥很大作用,本文给出了 实际项目中的一些相对复杂的例子,通过 Observable 防腐层的引入可以使用较少代码来实现上述复杂功能。

复杂业务的有效设计对于简单场景来说很可能是过度设计。不建议读者在没有场景的时候强行引入 Observable,工程领域实践中没有银弹,感谢大家的阅读。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8