zoukankan      html  css  js  c++  java
  • [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js

    Splitting a stream into multiple streams causes new subscriptions. You can think of new subscriptions as "invoking a function". So if your original stream makes a request for data, splitting the original stream will make 2 requests for data. The way to get around this is by using share so that each time the stream is split, all the split stream stay synced together.

    For the RxJS Code below, it issues network reuqest twice:

        const createLoader = url => from(this.$http.get(url)).pipe(pluck('data'));
    
        const luke$ = this.click$.pipe(
          mapTo('https://starwars.egghead.training/people/1'),
          switchMap(createLoader),
          catchError(() => createLoader('https://starwars.egghead.training/people/2'))
        );
    
        const name$ = luke$.pipe(pluck('name'));
    
        const image$ = luke$.pipe(
          pluck('image'),
          map(src => `https://starwars.egghead.training/${src}`)
        );

    Because both 'name$' and 'image$' will trigger 'luke$', then 'createLoader'.

    In order to solve the problem we can use 'share()' or 'shareReplay(1)':

        const luke$ = this.click$.pipe(
          mapTo('https://starwars.egghead.trainin/people/1'),
          switchMap(createLoader),
          catchError(() => createLoader('https://starwars.egghead.training/people/2')),
          share()
        );
  • 相关阅读:
    创建精灵--九宫格
    精灵灰化
    根据点中坐标,调整怪物动作方向
    从tableview中拖动某个精灵
    CCardSlip
    CCImage
    cocos2d-x---CCLabelTTF加载字体库
    CCAction、CCFiniteTimeAction、CCSpeed、CCFollow
    CCObject
    html中charset和content-language的区别
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9331046.html
Copyright © 2011-2022 走看看