[Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
2023-09-14 08:59:17 时间
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>
相关文章
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)点赞按钮动画
- vue执行命令时报错问题
- vue项目中抽离.vue文件中的js代码
- vuex结合vue-cookies的使用
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- 必争武林秘籍-Vue生命周期流程图
- 怎样在vue中安装、配置vue-axios|axios
- Vue+ElementUI项目使用webpack输出MPA
- Vue+Element ui上传图片限制图片尺寸
- vue-cli中安装方法
- win10 安装vue 详解-包括node.js、npm、webpack
- vue样式穿透
- 210:vue+openlayers 编辑矢量图形(放缩、平移、变形、旋转)
- 124:vue+openlayers:清除所有控件,按需添加Control
- 070:vue+openlayers 引用封装js测量距离和面积(示例代码)
- Vue环境下,在单页面中遍历显示出多个Echarts图表
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- 如何将vue项目打包为.apk文件
- JS工具方法 3 js客户端与php服务器通信加密之AES