[Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
2023-09-14 09:00:50 时间
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>
相关文章
- 基于Vue实现关键词实时搜索高亮显示关键词
- Vue_(组件通讯)动态组件
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- [Vue] Use Vue.js Component Computed Properties
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- vue.js3: json格式化(vue@3.2.37 / vue-json-pretty@2.1.1)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
- [FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- vue create 和vue init webpack的区别
- 如何在VUE单页面引入CSS、JS(CDN链接)
- Vue学习之--------计算属性(2022/7/9)
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vue中vue-i18n结合vant-ui实现国际化
- vue.config.js添加路径别名
- 091:vue+openlayers上传解析文件,支持.geojson .kml .shp格式(示例代码)
- 在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)
- vue常用修饰符
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)