zoukankan      html  css  js  c++  java
  • [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs

    Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Observable until it is needed. This becomes really important when the Observable is created from a Promise due to the way Promises execute on creation.

    Current Code:

    <template>
      <section class="section">
        <button class="button" v-stream:click="click$">Click</button>
        <h2>
          {{name$}}
        </h2>
        <img v-stream:error="imageError$" :src="image$" alt="">
      </section>
    </template>
    
    <script>
    import { from, merge } from 'rxjs';
    import { switchMap, pluck, map, mapTo } from 'rxjs/operators';
    
    export default {
      name: 'app',
      domStreams: ['click$', 'imageError$'],
      subscriptions() {
    
        const person$ = from(
          this.$http.get(
            "https://starwars.egghead.training/people/1"
          )
        ).pipe(
          pluck('data')
        )
    
        const luke$ = this.click$.pipe(
          switchMap(() => person$)
        )
    
        const name$ = luke$.pipe(
          pluck('name')
        )
    
        const loadImage$ = luke$.pipe(
          pluck('image'),
          map(src => `https://starwars.egghead.trainin/${src}` )
        )
    
        const failImage$ =  this.imageError$
        .pipe(
          mapTo(`http://via.placeholder.com/400x400`)
        )
    
        const image$ = merge(
          loadImage$,
          failImage$
        )
    
        return {
          name$,
          image$
        }
      }
    };
    </script>

    The highlight part of code will be run once page loaded. So it means before the button was clicked, we already send a network request.

    To defer the network request, we can do:

    <template>
      <section class="section">
        <button class="button" v-stream:click="click$">Click</button>
        <h2>
          {{name$}}
        </h2>
        <img v-stream:error="imageError$" :src="image$" alt="">
      </section>
    </template>
    
    <script>
    import { from, merge } from 'rxjs';
    import { switchMap, pluck, map, mapTo } from 'rxjs/operators';
    
    export default {
      name: 'app',
      domStreams: ['click$', 'imageError$'],
      subscriptions() {
    
        const loadPerson = (url) => from(
          this.$http.get(
            url
          )
        ).pipe(
          pluck('data')
        )
    
        const luke$ = this.click$.pipe(
          mapTo("https://starwars.egghead.training/people/1"),
          switchMap((url) => loadPerson(url))
        );
    
        const name$ = luke$.pipe(
          pluck('name')
        )
    
        const loadImage$ = luke$.pipe(
          pluck('image'),
          map(src => `https://starwars.egghead.training/${src}` )
        )
    
        const failImage$ =  this.imageError$
        .pipe(
          mapTo(`http://via.placeholder.com/400x400`)
        )
    
        const image$ = merge(
          loadImage$,
          failImage$
        )
    
        return {
          name$,
          image$
        }
      }
    };
    </script>
  • 相关阅读:
    vim 高级功能
    Vim高手,从来不用鼠标2——替换、撤销、缩进、查找
    Vim高手,从来不用鼠标
    zookeeper的leader选举机制个人总结
    【JVM】GC之垃圾收集算法
    【软件工程】常见的几种软件过程模型的比较
    【设计模式】适配器模式
    【计算机网络】网络的硬件构成要素
    【计算机网络】ISO/OSI 网络体系结构
    【Spring Cloud】Spring Cloud Config 实现分布式配置中心
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9326994.html
Copyright © 2011-2022 走看看