rxjs探索之路(合并类api)

2022-09-29

Rxjs的探索之路(合并类api)

Api功能分类

创建类（creation）
转化类（transformation）
过滤类（filtering）
合并类（combination）
多播类（multicasting）
错误处理类（error Handling）
辅助⼯具类（utility）
条件分⽀类（conditional&boolean）
数学和合计类（mathmatical&aggregate）

转换类(combination)

1.concat

concat的⼯作⽅式是这样：

从第⼀个Observable对象获取数据，把数据传给下游。对于实例操作符⽤法，第⼀个Observable就是调⽤concat的那个对象；对于静态操作符⽤法，第⼀个Observable是concat第⼀个参数。
当第⼀个Observable对象complete之后，concat就会去subscribe第⼆个Observable对象获取数据，把数据同样传给下游。
依次类推，直到最后⼀个Observable完结之后，concat产⽣的 Observable也就完结了。

import { concat, of } from "rxjs";

const source1$ = of(1, 2, 3);
const source2$ = of(4, 5, 6);

concat(source1$, source2$).subscribe(console.log);

2.merge

import { map, merge, take, timer } from "rxjs";

// merge先到先得
const source1$ = timer(100, 1000).pipe(
  map((x) => `A${x}`),
  take(3)
);
const source2$ = timer(500, 1000).pipe(
  map((x) => `B${x}`),
  take(3)
);

merge(source1$, source2$).subscribe(console.log);

source3$中的数据永远不会获得进⼊merged$的机会,因为merge最后⼀个参数是2,也就限定了同时只能同步合并两个Observable对象的数据,source1$和source2$排在前⾯,所以优先合并它们两个,只有source1$和source2$其中之⼀完结的时候,才能空出⼀个名额来给source3$,可是source1$和source2$又不会完结,所以source3$没有出头之⽇。

import { map, merge, take, timer } from "rxjs";

// merge的同步限流
const source1$ = timer(100, 1000).pipe(map((x) => `A${x}`));
const source2$ = timer(500, 1000).pipe(map((x) => `B${x}`));

const source3$ = timer(1000, 1000).pipe(map((x) => `C${x}`));

// 传入第3个参数
merge(source1$, source2$, source3$, 2).subscribe(console.log);

3.zip

import { of, zip } from "rxjs";

const source1$ = of(1, 2, 3);
const source2$ = of("a", "b", "c");
// zip是将两个数据流压缩到一起，然后再输出
zip(source1$, source2$).subscribe(console.log);

import { interval, of, zip } from "rxjs";

// 当出现一条无限流,在source2走完的时候，整个流就结束了
const source1$ = interval(1000);
const source2$ = of("a", "b", "c");
// zip是将两个数据流压缩到一起，然后再输出
zip(source1$, source2$).subscribe(console.log);

4.combineLatest

import { combineLatest, timer } from "rxjs";

const source1$ = timer(500, 1000);
const source2$ = timer(1000, 1000);
// 数据输出的时候会自动使用流的最新的一条数据
combineLatest({ source1$, source2$ }).subscribe(console.log);

5.withLatestForm

在第0毫秒时刻，source1$吐出数据100，source2$没有吐出数据，所以没有给下游产⽣数据。
在第500毫秒时刻，source2$吐出数据0，但是source2$并不直接触发给下游传递数据，所以依然没有给下游产⽣产⽣数据。
在第1500毫秒时刻，source2$吐出数据1，同样不会给下游产⽣数据。
在第2000毫秒时刻，source1$吐出数据100，这个数据会加上 source2$吐出的最后⼀个数据1，产⽣传给下游的数据101。
在第2500毫秒时刻，source2$吐出数据2，不会给下游产⽣数据。
在第3500毫秒时刻，source2$吐出数据3，不会给下游产⽣数据。
在第4000毫秒时刻，source1$吐出数据200，这个数据加上 source2$吐出的最后⼀个数据3，产⽣传给下游的的数据203。

import { map, timer, withLatestFrom } from "rxjs";

const source1$ = timer(0, 2000).pipe(map((x) => 100 * x));
const source2$ = timer(500, 1000);

source1$.pipe(withLatestFrom(source2$, (a, b) => a + b)).subscribe(console.log);

在输出中，所有输出的百位数由source1贡献，个位数由source2贡献。可以看到，source2虽然产⽣的是连续递增的整数序列，但并不是所有数据都进⼊了最终结果，很明显2和4就没有出现在最终结果的个位。⽽ source1$产⽣的数据，除了第⼀个0，其余全部出现在了最终结果的百位。

6.race

import { map, race, timer } from "rxjs";

const source1$ = timer(0, 2000).pipe(map((x) => 100 * x));
const source2$ = timer(500, 1000);

race(source1$, source2$).subscribe(console.log);

7.startWith

import { of, startWith } from "rxjs";

const source1$ = of(1, 2, 3);
// 数据流开始之前添加start
source1$.pipe(startWith("start")).subscribe(console.log);

8.forkJoin

import { forkJoin, of } from "rxjs";

const source1$ = of(1, 2, 3);
const source2$ = of(4, 5, 6);

// 默认返回的是每个source最后的一条数据
forkJoin([source1$, source2$]).subscribe(console.log);

9.concatAll,mergeAll,zipAll,combineAll

import { concatAll, interval, map, take } from "rxjs";

// concatAll,mergeAll,zipAll,combineAll 本身功能是一致的，会把高阶observable打平
interval(1000)
  .pipe(
    take(2),
    map((x) =>
      interval(1500).pipe(
        map((y) => x + ":" + y),
        take(2)
      )
    ),
    concatAll()
  )
  .subscribe(console.log);

10.switchAll

switch的含义就是“切换”，总是切换到最新的内部Observable对象获取数据。每当switch的上游⾼阶Observable产⽣⼀个内部Observable对象， switch都会⽴刻订阅最新的内部Observable对象上，如果已经订阅了之前的内部Observable对象，就会退订那个过时的内部Observable对象，这个“⽤上新的，舍弃旧的”动作，就是切换。

import { interval, map, switchAll, take } from "rxjs";

interval(1000)
  .pipe(
    take(2),
    map((x) =>
      interval(1500).pipe(
        map((y) => x + ":" + y),
        take(2)
      )
    ),
    switchAll()
  )
  .subscribe(console.log);

11.exhaustAll

连接⾼阶Observable产⽣的内部Observable对象，但是exhaust的策略和switch相反，当内部Observable对象在时间上发⽣重叠时，情景就是前⼀个内部Observable还没有完结，⽽新的Observable又已经产⽣，到底应该选择哪⼀个作为数据源？switch选择新产⽣的内部Observable对象，exhaust则选择前⼀个内部Observable对象。

import { exhaustAll, interval, map, take } from "rxjs";

interval(1000)
  .pipe(
    take(3),
    map((x) =>
      interval(1500).pipe(
        map((y) => x + ":" + y),
        take(2)
      )
    ),
    exhaustAll()
  )
  .subscribe(console.log);

展开全文 >>

rxjs探索之路(转换类api)

2022-09-29

Rxjs的探索之路(转换类api)

Api功能分类

创建类（creation）
转化类（transformation）
过滤类（filtering）
合并类（combination）
多播类（multicasting）
错误处理类（error Handling）
辅助⼯具类（utility）
条件分⽀类（conditional&boolean）
数学和合计类（mathmatical&aggregate）

转换类(transformation)

展开全文 >>

rxjs探索之路

2022-09-29

Rxjs的探索之路(创建类api)

何为函数式编程？

函数式编程就是⾮常强调使⽤函数来解决问题的⼀种编程⽅式。

你可能会问，使⽤函数不是任何⼀种语⾔、任何⼀种编程⽅式都有的⽅式吗？这根本不算是什么特点啊。的确，⼏乎任何⼀种编程语⾔都⽀持函数，但是函数式编程对函数的使⽤有⼀些特殊的要求，这些要求包括以下⼏点：

声明式（Declarative）
纯函数（Pure Function）
数据不可变性（Immutability）

Api功能分类

创建类（creation）
转化类（transformation）
过滤类（filtering）
合并类（combination）
多播类（multicasting）
错误处理类（error Handling）
辅助⼯具类（utility）
条件分⽀类（conditional&boolean）
数学和合计类（mathmatical&aggregate）

创建类 (creation)

1.of

1
2
3

import { of } from "rxjs";
// 生成指定数据
of(1, 2, 3).subscribe((x) => console.log(x));

2.range

1
2
3

import { range } from "rxjs";
// 生成指定范围内的数据
range(1, 10).subscribe((x) => console.log(x));

3.generate

import { generate } from "rxjs";
// 类似for循环生成数据
for (let i = 2; i < 10; i += 2) {
  console.log(i * i);
}
console.log("================");
generate(
  2,
  (value) => value < 10,
  (value) => value + 2,
  (value) => value * value
).subscribe((x) => console.log(x));

4.repeat

// 重复数据的数据流
import { of, repeat } from "rxjs";
const source$ = of(1);
source$.pipe(repeat(3)).subscribe(console.log);

5.empty,never,throw

1	import{ EMPTY, NEVER, throwError } from "rxjs";

6.interval,timer

import { interval } from "rxjs";
// 指定间隔之后吐出数据
interval(1000).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

import { timer } from "rxjs";
console.log(new Date());
// 启动3秒之后吐出数据
timer(3000).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

7.from

1
2
3

import { from } from "rxjs";
// from会把一切都当做iterable来对待
from([1, 2, 3]).subscribe(console.log);

8.fromEvent

import { fromEvent } from "rxjs";
// fromEvent
let clickCount = 0;
fromEvent(document.querySelector("#clickMe")!, "click").subscribe(() => {
  (document.querySelector("#text") as HTMLElement).innerText =
    (++clickCount).toString();
});

9.fromEventPattern

import { fromEventPattern } from "rxjs";

const emitter = new EventEmitter();

const addHandler = (handler) => {
  emitter.addListener("msg", handler);
};

const removeHandler = (handler) => {
  emitter.removeHandler("msg", handler);
};

const source$ = fromEventPattern(addHandler, removeHandler);

const subscription = source$.subscribe(console.log);

emitter.emit("msg", "Hello");
emitter.emit("msg", "World");

subscription.unsubscribe();
emitter.emit("msg", "end");

10.repeatWhen

import { interval, of, repeatWhen } from "rxjs";

const notifier = () => {
  return interval(1000);
};

const source$ = of(1, 2, 3);
// 每隔一段时间重新触发source，被notifier激活
source$.pipe(repeatWhen(notifier)).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

11.defer

import { defer, of } from "rxjs";

const observableFactory = () => of(1, 2, 3);
// defer包裹的observable只有再被调用的时候才会生成
const source$ = defer(observableFactory);

展开全文 >>

flutter web端解决跨域问题

2022-09-22

Flutter Web端解决跨域问题

1.当我们开发的flutter程序在ios和安卓上都运行正常时，开启web端测试。结果:

从图上我们观察到了跨域错误。

解决方法：

1.引入代理包

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_swiper_null_safety: ^1.0.2
  flutter_screenutil: 5.0.0+2
  dio: ^4.0.6
  # 引入代理类
  shelf_proxy: ^1.0.1

2.在lib目录下创建server package，添加代码

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';

void main() async {
  var server = await shelf_io.serve(
    proxyHandler("https://xxxxxxx"),
    '192.168.1.8',
    7777,
  );
  // 这里设置请求策略，允许所有
  server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
  server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);
  print('Proxying at http://${server.address.host}:${server.port}');
}

3.修改Request类的baseUrl

import 'package:dio/dio.dart';

class Request {
  static String domain = "http://192.168.1.8:7777/";
  static var options = BaseOptions(
    baseUrl: '${domain}api',
    // connectTimeout: 5000,
    receiveTimeout: 5000,
  );

  static Dio cli() {
    return Dio(options);
  }
}

展开全文 >>

flutter开发问题总结

2022-09-21

flutter开发问题总结

1. 引入flutter_swiper报错不同通过空值检查

Error: Cannot run with sound null safety, because the following dependencies
don’t support null safety:

package:flutter_swiper
package:flutter_page_indicator
package:transformer_page_view
For solutions, see https://dart.dev/go/unsound-null-safet

解决方法:

1.Android Studio

1 2	run --> Edit Configurations --> Additional run args添加 --no-sound-null-safety

2.Vscode

1 2	在用户设置里查找"Flutter run additional args"并添加 --no-sound-null-safety

展开全文 >>

Mac初始化flutter开发环境

2022-09-16

Mac初始化Flutter开发环境

1.安装Flutter sdk

Flutter Sdk: https://docs.flutter.dev/get-started/install

下载解压之后:

1 2	cd ~/development unzip ~/Downloads/flutter_macos_3.3.2-stable.zip

添加flutter到环境变量

1	export PATH="$PATH:`pwd`/flutter/bin"

2.运行flutter检查

1	flutter doctor

我们依次安装 Android Studio, Xcode, Chrome, 没有IDEA的可以使用Vscode。

如果有小伙伴Http Host Availability没有通过的，需要切换国内镜像：

1 2	export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

漫长的安装时间…

最终通过doctor检测:

展开全文 >>