追枫

追枫 查看完整档案

大连编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

亦真实,亦虚幻;亦飞快,亦缓慢;平淡而真实的世界。
愿你在无尽的技术海洋里荡漾,乐此不疲。

个人动态

追枫 提出了问题 · 11月23日

Element-ui 无限滚动 InfiniteScroll 在一次性把数据取回的情况如何使用?

一般情况是滚动触发一次,取回一部分数据,如下代码.
如果一次性把数据取回呢,如何处理 ?

<template>
  <div id="box">
    <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
        <ul class="list" >
          <li v-for="(i,index) in list" class="list-item" :key="index">{{ i.noticeTitle }}</li>
        </ul>
        <p v-if="loading" style="margin-top:10px;" class="loading">
          <span></span>
        </p>
        <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0,//起始页0
      loading: false,
      totalPages: "",//取后端返回内容的总页数
      list: [] //后端返回的数组
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
        this.getMessage(); //调用接口,此时页数+1,查询下一页数据
      }, 2000);
    },
    getMessage() {
      let params = {
        pageNumber: this.count,
        pageSize: 10 //每页查询条数
      };
      this.$axios
        .post(
          "https://接口",
          params
        )
        .then(res => {
          console.log(res);
          this.list = this.list.concat(res.data.body.content); //因为每次后端返回的都是数组,所以这边把数组拼接到一起
          this.totalPages = res.data.body.totalPages;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

关注 2 回答 1

追枫 提出了问题 · 11月20日

elementUI Transfer 穿梭框,大量数据时卡

如题,elementUI Transfer 穿梭框大量数据(数据有2000多条)时卡顿严重.当前是一次性将数据取回.如何实现类似 懒加载 的效果?

image

关注 2 回答 0

追枫 提出了问题 · 11月17日

重写elementUI Transfer组件后,提示找不到

因为elementUI Transfer性能问题,参考重写了这个组件.但引入后,为什么找不到呢?

一般认为是路径错误,应试如何写?
路径部分如下:

import Transfer from '../common/transfer'  //引入自重写组件
  export default {
   components:{            
     Transfer:Transfer      // 定义重写组件
   },

操作步骤:
node_modules/element-ui/packages/transfer,文件夹复制,然后放入vue项目路径的 src/common

一.App.vue中使用如下:

<template>
  <Transfer
    filterable
    :filter-method="filterMethod"
    filter-placeholder="请输入城市拼音"
    v-model="value"
    :data="data">
  </Transfer>
</template>

<script>
import Transfer from '../common/transfer'  //引入自重写组件
  export default {
   components:{            
     Transfer:Transfer      // 定义重写组件
   },
    data() {
      const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京';
        const pinyin = ['shanghai', 'beijing';
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {
        data: generateData(),
        value: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        }
      };
    }
  };
</script>

二.结构截图如下:

image

三.错误提示如下:

 ERROR  Failed to compile with 1 errors                                                                                                 2:41:54 PM

This relative module was not found:

* ../common/transfer in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

image

四.浏览器console:
image

关注 3 回答 3

追枫 回答了问题 · 11月9日

解决java junit @Before 测试错误基础问题

解决方案

使用@BeforeEach和@AfterEach注解,查阅的网上的资料,新版本中,spring-boot用的是junit 5.x。

关注 1 回答 1

追枫 赞了文章 · 11月9日

思否专访丨华为 HMS 的全球生态,发展到了什么程度?

HMS-Core

10月30日,随着新一代高端旗舰手机华为 Mate40 系列在国内正式发布,华为在原有的基础上又新增了部分产品,每个产品也都新增了很多新功能并对应用场景进行了体验优化。

在正式的发布会前,SegmentFault 思否对华为消费者云服务副总裁谭东晖与华为消费者云服务营销总监张海蓓进行了媒体采访,就 HMS 在生态构建、能力开放、根服务、创新体验,隐私安全,包括最近上线的 Petal Search 和 Petal Maps 以及华为在全球生态领域的一些进展。

一、华为的全场景智慧生态发展之路

华为一直强调全场景智慧生态其实包含两方面:硬件生态和以 HMS 为核心的应用生态,这两方面的生态驱动着华为在消费者业务的全面发展。

如何评价一个生态的成功,谭东晖给出了一个观点:“第一是生态规模;第二是生态本身的质量;第三是生态的发展潜力。”

华为消费者云服务副总裁谭东晖
(华为消费者云服务副总裁谭东晖)

经过过去两年的发展,AppGallery 目前已经做到了全球 Top3,月活达到 5 亿。并且为了促进生态的发展,华为把很多特色的能力通过 HMS Core kit 开放出来,到目前为止,已经开放了 56 个 kit,而且对外开放了 12981 个 API,这是华为 HMS 生态在规模上取得的阶段性成绩。

在生态的质量方面,HMS Core 5.0 全面开放了华为“软硬件 + 云端”的各项创新能力,构建了极为丰富的服务体系,从而为华为终端用户带来了更多更好的全场景智慧生活体验;而在保证生态的质量以及发展潜力方面,华为的战略之一就是把五个根服务引擎做到“扎实”。

其中,谭东晖认为地图引擎(Petal Maps)和搜索引擎(Petal Search)对华为赢回海外市场起着关键作用,“地图某种意义上说是一种空间的信息的组织,搜索某种意义上是时间维度的信息组织,所以我们认为这种地图引擎也好,搜索引擎也好,是未来信息流技术上面很重要的根基,所以我们一定要把它做扎实了。”

华为近期最新发布的 Petal search,已经在海外 170 多个国家和地区上线,并且支持了 50 多种语言,支持文本的、视觉的、声音的搜索,和业界的其他平台相比,这是一种多模态的探索。此外华为也在大力发展本地化以及全球性的基础设施建设,这些关键点的融合可能会催生出 HMS 生态的一个破局点。

二、差异化与用户隐私

谭东晖一直强调的另一个词就是「差异化」。“其实华为在做 HMS 生态的初期就决定必须要有差异化的产品和服务。多年来,华为在通讯领域的积累,以及软硬件能力的开放,就是我们打造差异化的竞争优势。”

以搜索引擎为例,其差异化主要体现于三个方面:一是遵循移动优先的原则,即首先针对移动设备设计,然后调整使它适应桌面设备;二是搜索模式的转变,即从传统的单模式搜索转向跨模式多模态搜索;三是注重本地化服务,即从本地用户的实际需求出发,结合本地的服务进行创新的搜索体验。

在采访中,谭东晖用了动态 AOD(息屏显示)举例。息屏显示是近两年用户和厂商们非常热衷的一个使用场景,常规的都是很简单的时钟,而华为提供了动态 AOD 功能,让息屏场景变得更加有趣以及个性化。

随着技术的发展,很多用户会更加担心个人的隐私问题。这部分也是华为生态发展的一个重点。“华为作为一种技术型的公司,一定是通过技术创新,来实现用户隐私的保护。”谭东晖提到,希望华为所有的服务以及更多基于 HMS 的第三方系统,能够做到不打扰、不追踪、不泄漏用户的隐私,在这当中华为也提出了很多可行性方案并付诸实践。

三、能力的融合与体验

此次华为新增的产品虽然并不多,但在每个产品上都在进行着持续的创新。华为消费者云服务营销总监张海蓓在采访中分享了华为生态伙伴各种能力的融合与更多的体验场景。

华为消费者云服务营销总监张海蓓
华为消费者云服务营销总监张海蓓

1、全场景支付

在移动支付普及之前,我们出门钱的口诀是“身手钥钱”,身份证、手机、钥匙还有钱包四小件不能忘。而随着网络以及智能手机的发展,很多人出门只要带一台手机就万事大吉了,甚至连一些物业和社区的门禁开启都可以通过华为手机 AI Pass 智慧功能都可以开启了

移动支付已经成为了很多人的主力支付方式,为了进一步增强移动支付的能力,华为不仅推出了全场景的支付体验 —— 华为钱包,同时还创新推出了华为手机用户的专属信用卡 Huawei Card,已经在全国近 50 个城市开通。

在采访中,张海蓓还透露说:“随着进一步和物业的合作,在用户刷卡的时候会对小区内的服务进行智能提醒,比如提醒交缴费停车、水电费、以及小区内物业建设的通知。在刷卡的一瞬间,可以获得更多的智慧体验。”

2、AR 地图

在今年的 P40 发布会上,华为发布了 AR 地图的智慧体验,发布会中分享的案例是一个小学生在国庆节去敦煌参观,借助华为手机 AR 地图的功能,在游览过程中获取了更多的专业知识以及历史知识。

这是 AR 地图的应用场景之一,随着华为将软硬件进行的进一步融合,华为也正在将类似的服务应用到更多城市以及应用场景。

3、浏览器

浏览器并不是一个特别新的产品,华为已经在全球 170 多个国家和地区发布上线。借助华为智慧网络以及 AI 能力的融合,华为浏览器的一个亮点功能是支持 49 种语言的互译,也就是说,大家无论是在国内还是在国外,使用浏览器信息的时候,很轻松的实现语言的切换。

除了上述这些产品,张海蓓还介绍了华为音乐、查找设备、HMS for Car 等应用提升的新功能与新场景。从张海蓓的介绍中,我们不难发现华为在生态发展和运营中其实一直有着自己的方法论以及节奏,在后续的媒体提问环节中,谭东晖老师也补充到:“关于体验创新,华为讲了三个关键词:UFU(用户体验来自于用户反馈)、OMO(线上线下融合)、L2L(Lab to Lab)。只要坚持这三个关键词,我相信整个运作机制就会顺畅起来,就能够把我们的体验,包括我们未来产品做的更优秀。”


“我们最初做数字化钱包,是为了消灭物理钱包,也希望能够从环保层面减少对动物皮毛的使用。”张海蓓在采访结束前分享到,华为希望能贡献力量,把科技和生活中的体验融合起来,最终回报消费者。

从整场沟通会,可以看出华为在 HMS 生态上的信心以及行动力。对于 HMS,华为倾注了极大的心血,也赋予了极大的期待。但正如张海蓓所说,科技和技术发展的最终目标正是为了帮助人们探索更美好的生活,也期待华为 HMS 生态能够全球华为用户提供更加精彩、更加美好的软硬结合的数字生活体验。

segmentfault 思否

查看原文

赞 20 收藏 0 评论 0

追枫 提出了问题 · 11月9日

解决java junit @Before 测试错误基础问题

已解决,答案在下面.

学习java基础,junit一直报错,找不到错误点.

当前知道问题在@Before这里了,如果将此部分注释,CartService.getCartSkuList();取值放在@Test内,没有问题.

那么@Before错在哪里呢?

package com.imooc.lambda.stream;
import java.util.Arrays;
import java.util.Comparator;
import java.util.List;
import com.alibaba.fastjson.JSON;
import com.imooc.lambda.cart.SkuCategoryEnum;
import org.junit.Before;
import org.junit.jupiter.api.Test;
import com.imooc.lambda.cart.CartService;
import com.imooc.lambda.cart.Sku;

public class StreamOperator {
   
   List<Sku>  list;
 @Before
 public void init() {
      list = CartService.getCartSkuList();
 }
   
   @Test
 public void filterTest() {
      list.stream()         // line 36
            .filter(sku -> SkuCategoryEnum.BOOKS.equals(sku.getSkuCategory()))
            .forEach(item -> System.out.println(JSON.toJSONString(item, true)));
 }

}

错误提示:

1.截图:
image

2.代码:

java.lang.NullPointerException
    at com.imooc.lambda.stream.StreamOperator.filterTest(StreamOperator.java:31)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.junit.platform.commons.util.ReflectionUtils.invokeMethod(ReflectionUtils.java:686)
    at org.junit.jupiter.engine.execution.MethodInvocation.proceed(MethodInvocation.java:60)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain$ValidatingInvocation.proceed(InvocationInterceptorChain.java:131)
    at org.junit.jupiter.engine.extension.TimeoutExtension.intercept(TimeoutExtension.java:149)
    at org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestableMethod(TimeoutExtension.java:140)
    at org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestMethod(TimeoutExtension.java:84)
    at org.junit.jupiter.engine.execution.ExecutableInvoker$ReflectiveInterceptorCall.lambda$ofVoidMethod$0(ExecutableInvoker.java:115)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.lambda$invoke$0(ExecutableInvoker.java:105)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain$InterceptedInvocation.proceed(InvocationInterceptorChain.java:106)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.proceed(InvocationInterceptorChain.java:64)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.chainAndInvoke(InvocationInterceptorChain.java:45)
    at org.junit.jupiter.engine.execution.InvocationInterceptorChain.invoke(InvocationInterceptorChain.java:37)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.invoke(ExecutableInvoker.java:104)
    at org.junit.jupiter.engine.execution.ExecutableInvoker.invoke(ExecutableInvoker.java:98)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.lambda$invokeTestMethod$6(TestMethodTestDescriptor.java:212)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.invokeTestMethod(TestMethodTestDescriptor.java:208)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute(TestMethodTestDescriptor.java:137)
    at org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute(TestMethodTestDescriptor.java:71)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$5(NodeTestTask.java:135)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$7(NodeTestTask.java:125)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:135)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:123)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:122)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:80)
    at java.util.ArrayList.forEach(ArrayList.java:1257)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll(SameThreadHierarchicalTestExecutorService.java:38)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$5(NodeTestTask.java:139)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$7(NodeTestTask.java:125)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:135)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:123)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:122)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:80)
    at java.util.ArrayList.forEach(ArrayList.java:1257)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll(SameThreadHierarchicalTestExecutorService.java:38)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$5(NodeTestTask.java:139)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$7(NodeTestTask.java:125)
    at org.junit.platform.engine.support.hierarchical.Node.around(Node.java:135)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8(NodeTestTask.java:123)
    at org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute(ThrowableCollector.java:73)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively(NodeTestTask.java:122)
    at org.junit.platform.engine.support.hierarchical.NodeTestTask.execute(NodeTestTask.java:80)
    at org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.submit(SameThreadHierarchicalTestExecutorService.java:32)
    at org.junit.platform.engine.support.hierarchical.HierarchicalTestExecutor.execute(HierarchicalTestExecutor.java:57)
    at org.junit.platform.engine.support.hierarchical.HierarchicalTestEngine.execute(HierarchicalTestEngine.java:51)
    at org.junit.platform.launcher.core.DefaultLauncher.execute(DefaultLauncher.java:248)
    at org.junit.platform.launcher.core.DefaultLauncher.lambda$execute$5(DefaultLauncher.java:211)
    at org.junit.platform.launcher.core.DefaultLauncher.withInterceptedStreams(DefaultLauncher.java:226)
    at org.junit.platform.launcher.core.DefaultLauncher.execute(DefaultLauncher.java:199)
    at org.junit.platform.launcher.core.DefaultLauncher.execute(DefaultLauncher.java:132)
    at com.intellij.junit5.JUnit5IdeaTestRunner.startRunnerWithArgs(JUnit5IdeaTestRunner.java:69)
    at com.intellij.rt.execution.junit.IdeaTestRunner$Repeater.startRunnerWithArgs(IdeaTestRunner.java:47)
    at com.intellij.rt.execution.junit.JUnitStarter.prepareStreamsAndStart(JUnitStarter.java:242)
    at com.intellij.rt.execution.junit.JUnitStarter.main(JUnitStarter.java:70)



Process finished with exit code 255

关注 1 回答 1

追枫 提出了问题 · 11月5日

MuleSoft Anypoint Studio 连接 Sap hana 配置问题

Anypoint Studio 画布中有三个组件.
1.HttpListener配置如下:

Protocol: HTTP(Default)
Host: All Interfaces[0.0.0.0](default)
Port: 8081

2.Select配置连接HANA正确,测试通过.

SELECT TOP 100 * FROM SAPHANADB.KFC;  //测试SQL

3.Transform Message默认配置如下:

%dw 2.0
output application/java
---
{}

访问接口返回信息如下:

java.lang.RuntimeException: Attempted to send invalid data through http response.

尝试过将java改为json,将{}改为payload,同样返回如上信息.

%dw 2.0
output application/json
---
payload

请问如何配置?

配个图

关注 1 回答 0

追枫 赞了文章 · 11月3日

rxjs随笔1--rxjs能做什么

首先我们要弄懂这几个问题:
1.rxjs是什么
2.rxjs能做什么
3.已经有了promise的情况下为什么还需要rxjs
4.rxjs的使用方法
如果这些问题都直接去网上搜然后贴上链接,感觉我这篇文章就没什么写的必要了。当然了资料已经非常多了,确实不需要我再为大家写一点所谓有帮助的文章了。那么为什么还要写呢,写这个是为了自己,为了自己能够更好的理解rxjs,与大家无关,也与白洁无关。

1.rxjs是什么

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

2.rxjs能做什么

javascript写前端页面的时候,除了展示数据UI之外,还需要相应用户的操作,展示动态的数据,展示动态的UI。于是前端的异步有:事件(event)、ajax、动画(animation)、定时器(timer)。 处理这些的时候常见的问题有:异步的回调地狱(callback hell) 竞态条件(race condition) 内存泄漏(memory leak) 管理复杂状态(manage complex states) 错误处理(exception handling)

1.回调地狱:按照普通的javascript方法写,所有的处理写在某个事件的完成后的回调中,当有多个回调依次执行后1->2->3->4很容易将代码写成火箭形,很大一团根本没发改。
2.竞态条件:是指系统出现不恰当的执行时序,而得到不正确的结果。比如搜索框中,每次输入后发送请求获取结果展示在搜索框下面,由于网络或者后端查询的原因有可能导致最后发送的请求比之前的请求更快的完成了,这时最终展现的并不是最后那个请求的结果,而这并不是我们所希望的。
3.内存泄漏:当单页面应用切换页面时未在合适的时机移除监听事件造成内存泄漏
4.复杂状态的管理:异步带来了状态的改变,可能会使状态管理变得非常复杂,尤其是某个状态有多个来源时,比如有些应用,一开始有一个默认值,再通过 AJAX 获取初始状态,存储在 localStorage,之后通过 WebSocket 获取更新。这时查询状态可能是同步或者异步的,状态的变更可能是主动获取也可能是被动推送的,如果还有各种排序、筛选,状态管理将会更加复杂。
5.错误处理:javascript中的try catch只能捕获同步的错误,对于异步的错误难以获取。promise中可以使用一个全局的catch。

3.已经有了promise的情况下为什么还需要rxjs

Promise:promise已经解决了很多异步的难点,比如将回调地狱改为了链式调用,统一同步和异步代码,但是promise只有一个结果,并且不可以被提前取消(讲真,可能是我做的工作都太简单了,这些问题其实我并没有真正遇到过)

4.rxjs的使用方法

异步 API
各种异步的API
DOM Events
XMLHttpRequest
fetch
WebSocket
Service Worker
setTimeout
setInterval
requestAnimationFrame
如果使用rxjs来处理,可以使用统一的API,而且借助rxjs各种强大的操作符,可以非常简单的实现需求。对于不同的场景使用不同API来完成功能:

  1. 创建 Observable 的方法、types、schedulers 和一些工具方法
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
// asapScheduler SubscriptionLike PartialObserver 没有使用过
  1. 操作符(可以理解为rxjs提供的一些快捷功能,对Observe中的produce产生的数据的预处理,处理完成之后再到subscribe中的观察者中进行处理)
import { map, filter, scan, take, takeUtil } from 'rxjs/operators';
  1. webSocket
import { webSocket } from 'rxjs/webSocket';

4.ajax

import { ajax } from 'rxjs/ajax';

创建Observable

创建Observable主要有两步

  1. new Observable时接受一个产生数据的方法function,function产生数据的方式为function接受一个形参(ob)ob有三个属性:next,error,complete。在方法内使用ob.next('希望传出的值'),来向外面传输流。
  2. new Observable后返回一个对象,这个对象一般使用$作为后缀便于标识,在这个对象上调用subscribe方法传入你所希望的观察者函数。
import { Observable } from 'rxjs';    
const source$ = new Observable(observer => {
let number = 1
  setInterval(() => {
    observer.next(number++)
  }, 1000)
})
const observer = {
  next : item => console.log(item)
}
console.log('start')
source$.subscribe(observer)
console.log('end')
  1. 对数据流的预处理,这是两步之外的,但还是希望一起讲。对数据的预处理,new Observable产生的发出数据流对象之前,可以调用pipe方法来对数据进行预处理叫做Operators操作符。注意⚠️,每一个操作符都会返回一个全新的Observable对象
source$.pipe(
    take(5), // 只要前五个
    first(), // 是获得满足判断条件的第一个数据
)

要实现的功能

  1. 实现类似promise的功能,单个的Promise.then()

可以使用concatMap操作符

new Observable((observe) => {
  setTimeout(() => observe.next(['first']), 1000)
}).pipe(
  concatMap(value => {
    console.log(value);
    return new Observable((observe) => {
      setTimeout(() => observe.next(value.concat('two')), 1000)
    })
  }),
).subscribe()

2.

实现类似promise的链式调用
使用concatMap,具体写法类似

from(this.getUserInfo())
.pipe(
  concatMap(userInfo => this.getUserParent(userInfo)),
  concatMap(parentInfo => this.get(...))
)

3.实现类似promise.all的效果

forkJoin()

查看原文

赞 5 收藏 2 评论 0

追枫 赞了回答 · 10月30日

解决ubuntu18.4 连接虚拟机(linux),需要哪些必备条件?

你网不通,肯定看你网设置啊,在不在一个网段,网关设置的对不对

关注 2 回答 1

追枫 提出了问题 · 10月28日

使用Navicat连接Oracle用户基础问题

如下图,在Oracle中使用如下命令创建了用户tableau;

create user tableau identified by test;

使用Navicat在连接tableau下,通过界面用户选项,操作创建了用户ADMIN,
ADMIN用户下,新建了表A,B,C;

1.用户tableau与用户ADMIN什么关系?
2.若要在终端对表A,B,C操作,需要登录 ADMIN用户?

image

image

右上角->用户选项:
image

关注 1 回答 0

认证与成就

  • 获得 14 次点赞
  • 获得 138 枚徽章 获得 1 枚金徽章, 获得 26 枚银徽章, 获得 111 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-06-23
个人主页被 1.8k 人浏览