SNS项目笔记<四>--RXjs简要用法

关于RX系列,博主不需要多讲,源自C#开发,纯粹的响应链状式的编程,让大型项目的代码简略化以及底层优化。博主只要编程者记住一个概念就行,并不是所有编程适合RX,但是RX是解决动态响应,以及多线程的首选。Angular升级到2过后,一直延续着promise做流处理,但是它自身携带的RXjs又是处理流的利器。本篇从实战角度出发,简要的概括它的两个使用方法

1、极简HTTP请求

1.1、创建provider

在命令行输入ionic g provider youProviderName 在创建好后,系统会自动导入从@angular/http里导入Http这个类,方便后续做直接使用此类做HTTP请求。

1.2、请求头处理
/**
     定义全局头部
     1、指定Content-Type 和服务器互相以json交互<RequestBody 为json>
     2、指定ACCESS_TOKEN用于登陆验证
*/
private header = new Headers({
    'Content-Type': 'application/json',
    'ACCESS_TOKEN': this.getToken()
  });

getToken() {
    let token = localStorage.getItem("token");
    return token || ""
  }

自定义请求头后我们可以完全掌握与后台的请求对接方式,在后期无论以表单传文件,或者是soap请求方面都可以自定义,这里只做简单的说明。

1.3、get、post请求
//由于rxjs包很大,内容很多,我们取有需要的即可
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch' 
export class BaseServiceProvider{
......
/**
使用自定义头部option
*/
private option = new RequestOptions({heads:this.header})

/**
get请求,注册请求体
url:请求url
ResponseBody: 自定义pojo类
*/
get():Observable<ResponseBody>{
    return this.http.get(url,this.option)
.map(response=>response.json())
.catch(this.handleError)
}

/**
post请求,注册请求体
url:请求url
ResponseBody:自定义pojo类
*/
post(param):Observable<ResponseBody>{
    return this.http.post(url,{'key',param},this.option)
.map(response=>response.json())
.catch(this.handleError)
}


//这里直接使用官方教程的类,处理错误信息
private handleError(error: Response | any) {
    this.dialog.dismiss();
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
......
注意:这里的get,post源码中是这样写的:
   /**
     * Performs a request with `get` http method.
     */
    get(url: string, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `post` http method.
     */
    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;

option为可携带参数,所以在某些特定的情况下可以使用默认的头部进行HTTP请求

1.4、建立请求响应方法
   //某个需要请求的类里:
   export class RealPage{
    constructor(public navCtrl: NavController, public navParams: NavParams, public baseService:BaseServiceProvider) {
    }
    param:any  //请求携带的参数,这里可以自定义为number、string、boolean、Array类型
    ionViewDidLoad(){
        //建立get请求
        this.baseService.get()
.subscribe(
            data => this.responseData = data, Error => {//请求失败,处理信息}, () => {//请求成功,ResponseData数据处理}
        );
        //建立post请求
        this.baseService.post(this.param)
.subscribe(
            data => this.responseData = data, Error => {//请求失败,处理信息}, () => {//请求成功,ResponseData数据处理}
        );

    }

} 

通过以上使用RXjs方法,我们很快的就完成了HTTP请求的搭建,很简单的响应式模式,很迅捷的编程体验RxJS,你值得使用。

1.5、简单理解Rx

很多人难以理解Rx,其实很简单,因为翻译文档很拗口,导致很多东西描述起来非常困难,当然想知道原理就得看源码去理解了。这里就简单理解,一个特殊的观察者,监听器--Observable,一个注册机制 --Subscribe, 一经注册便可拥有传输能力和响应机制,想使用,必须注册,就和需要啥啥权益注册很多会员一样,仅此而已。

2、回调监听--组件中通讯

在写ionic时发现当页面pop()的时候,竟无返回响应机制,这个时候,页面与页面就可以使用RXjs进行传播串接起来,类似于Android里面的EventsBus,Otto等。

2.1、封装provider

<<借鉴の博客>>

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RxBus{

    private param: any;
    private subject: Subject<any> = new Subject()

    setListener(param: any): void {
        this.param= param;
        this.subject.next(param);
    }

    bus(): Observable<any> {
        return this.subject.asObservable();
    }
}
2.2、监听与回调
export class MainPage {
     constructor(public eventsBus:RxBus) {}

     ionViewDidLoad() {
        //注册监听器
        this.eventsBus.bus().subscribe(param=>{
                 //处理param
        })
      }

}  
export class NextPage {
      constructor(public eventsBus:RxBus,public nav:NavController) {}
      
      //回到MainPage页面
      backClick(){
             // 设置回调
             this.eventsBus.setListener("param");
             this.nav.pop();
      }
}

这样一来,MainPage就会接收到来自NextPage的param,非常好的实现了页面间的通讯。

结尾的话:这就是Rx的代码魅力,非常简单的完成很多任务,后面会有相册处理方面的博文,到时候着重讲解RXjs处理文件的方式,尽请期待!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大魏分享(微信公众号:david-share)

用Ansible自动供应vmware虚拟机--构建数据中心一体化运维平台第二篇

1.1 简述 一直以来,打开邮箱被ticket糊一脸的事情时有发生。我一直在想,能不能以一种简单的方案(不花老板的钱)来供应(provisioning)虚拟机呢...

74420
来自专栏Laoqi's Linux运维专列

Kubernetes 1.8.6 集群部署–所遇到的问题(八)

51950
来自专栏云计算教程系列

在CVM上监控其他Centos系统

Alerta是一个Web应用程序,用于合并和删除来自多个监视系统的警报,并在单个屏幕上显示它们。Alerta可以与许多被人们广泛熟知的监控工具集成,如Nagio...

23440
来自专栏Netkiller

高级运维工程师面试题(更新中)

高级运维工程师 服务器硬件 RAID 磁盘阵列 简述 RAID? RAID 0 5 6 10 50 都适用于那些场景? 数据库适用那种 RAID? RAID 1...

1.2K40
来自专栏Brian

Mac 配置终端环境

Mac 配置终端开发环境 ---- 概述 作为一个服务端开发人员基本上都是通过终端和服务器打交道,所以一个好个开发人员那么他的终端配置也是高效的。“工欲善事必先...

463110
来自专栏安恒网络空间安全讲武堂

打个3dsctf,电脑机都开不了?

3DSCTF Malware 3道题 writeup tags: - Reverse - malware ---- 这个ctf有个Malware的题型,...

27590
来自专栏CSDN技术头条

资源控制在大数据和云计算平台中的应用

本文针对大数据平台中资源控制这个层面来详细介绍资源控制在不同操作系统上的具体技术实现,以及大数据平台和资源控制的集成。

64780
来自专栏沈唁志

PHP开发规范之使用phpcbf脚本自动修正代码格式

在前段时间的文章:在PhpStorm中安装使用PHP_CodeSniffer编码规范检查工具中提到过phpcbf脚本

30810
来自专栏测试驿栈

入侵常用端口详解

第三方通用组件漏洞struts thinkphp jboss ganglia zabbix 

47120
来自专栏技术翻译

分析R中的Elasticsearch数据

您可以在任何可以安装R和Java的计算机上使用纯R脚本和标准SQL访问Elasticsearch数据。您可以使用适用于Elasticsearch的CData J...

25630

扫码关注云+社区

领取腾讯云代金券