首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

Angular2 http.get(),map(),subscribe()和可观察模式 - 基本理解

作者：手机用户2402852307 | 2023-09-08 09:54
如何解决《Angular2http.get(),map(),subscribe()和可观察模式-基本理解》经验，为你挑选了3个好方法。

现在,我有一个初始页面,其中有三个链接.点击最后的"朋友"链接后,会启动相应的朋友组件.在那里,我想获取/获取我的朋友的列表进入friends.json文件.直到现在一切正常.但我仍然是使用RxJs的observables,map,subscribe concept的angular2的HTTP服务的新手.我试图理解它并阅读一些文章,但在我开始实际工作之前,我不会理解这些概念.

在这里,我已经制作了除HTTP相关工作之外的plnkr.

Plnkr

myfriends.ts

 import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
 import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
 import 'rxjs/Rx';
 @Component({
    template: `
    
My Friends

    
    
      
  • 
          {{frnd.name}} is {{frnd.age}} years old.
      
    • 
    

    `,
    directive:[CORE_DIRECTIVES]
  })

  export class FriendsList{

      result:Array; 
      constructor(http: Http) { 
        console.log("Friends are being called");

       // below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.

        this.result = http.get('friends.json')
                      .map(response => response.json())
                      .subscribe(result => this.result =result.json());

        //Note : I want to fetch data into result object and display it through ngFor.

       }
  }



请正确指导和解释.我知道这对许多新开发者来说非常有益.


1> Abdulrahman ..：
这是你出错的地方:



this.result = http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result.json());




它应该是: 



http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result);




要么



http.get('friends.json')
                  .subscribe(result => this.result =result.json());




你犯了两个错误:



1-您已将观察者自己分配给this.result.当你真的想要分配朋友列表时this.result.正确的方法是:





你订阅了observable..subscribe是实际执行observable的函数.它需要三个回调参数如下:



.subscribe(success, failure, complete);





例如:



.subscribe(
    function(response) { console.log("Success Response" + response)},
    function(error) { console.log("Error happened" + error)},
    function() { console.log("the subscription is completed")}
);




通常,您从成功回调中获取结果并将其分配给您的变量.错误回调是自解释的.完整的回调用于确定您已收到最后的结果而没有任何错误. 
在您的plunker上,在成功或错误回调之后将始终调用完整的回调.



2-第二个错误,你打电话.json()给.map(res => res.json()),然后你再次调用它来观察成功回调.
.map()是一个变换器,它会将结果转换为你返回的任何内容(在你的情况下.json()),然后传递给成功回调,你应该在其中任何一个上调用它.

        
你是对的@rubmz.你可以像我在回答中提到的那样做.但是,一个巨大的好处是分离逻辑.例如,在你的服务中,你有一个函数`getFriends(){return http.get('friends.json').map(r => r.json());}`.现在,您可以调用`getFriends().subscribe(...)`,而无需每次都调用`.json()`. 
在这里你[你的plunker](http://plnkr.co/edit/oYFhsMEJFMi7NzGPpvT1?p=preview).我改变了行:21,23在myfriends.ts上 
是的,这对新手来说有点混乱.什么那神奇的地图()做什么,什么不做......但最后我也得到了:) 

2> Thierry Temp..：
概念



简而言之,Observable处理异步处理和事件.与承诺相比,这可以被描述为observables = promises + events.



对于observable来说,最好的是它们是懒惰的,它们可以被取消,你可以在它们中应用一些运算符(比如map......).这允许以非常灵活的方式处理异步事物.



描述最佳可观察能力的一个很好的样本是将过滤器输入连接到相应的过滤列表的方法.当用户输入字符时,列表将刷新.如果另一个请求由输入中的新值触发,则Observable处理相应的AJAX请求并取消先前正在进行的请求.这是相应的代码:



this.textValue.valueChanges
    .debounceTime(500)
    .switchMap(data => this.httpService.getListValues(data))
    .subscribe(data => console.log('new list values', data));




(textValue是与过滤器输入关联的控件).



以下是对此类用例的更广泛描述:如何监视Angular 2中的表单更改？.



AngularConnect 2015和EggHead有两个很棒的演示:





Observables vs promises  - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises


创建一个可观察的 - https://egghead.io/lessons/rxjs-creating-an-observable


RxJS深入了解https://www.youtube.com/watch?v=KOOT7BArVHQ


Angular 2数据流 - https://www.youtube.com/watch?v=bVI5gGTEQ_U





Christoph Burgdorf还撰写了一些关于这个主题的精彩博文:





http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html


http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html





在行动中



事实上,关于你的代码,你混合了两种方法;-)以下是:





由您自己管理可观察的.在这种情况下,您负责subscribe在observable上调用该方法,并将结果分配给组件的属性.然后,您可以在视图中使用此属性来迭代集合:



@Component({
  template: `
    
My Friends

    
    
      
  • 
        {{frnd.name}} is {{frnd.age}} years old.
      
    • 
    

  `,
  directive:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit, OnDestroy {
  result:Array; 

  constructor(http: Http) {
  }

  ngOnInit() {
    this.friendsObservable = http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result = result);
   }

   ngOnDestroy() {
     this.friendsObservable.dispose();
   }
}



两者get和map方法的返回是可观察的而不是结果(与promises相同).


让我们通过Angular模板管理observable.您还可以利用async管道隐式管理observable.在这种情况下,不需要显式调用该subscribe方法.



@Component({
  template: `
    
My Friends

    
    
      
  • 
        {{frnd.name}} is {{frnd.age}} years old.
      
    • 
    

  `,
  directive:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit {
  result:Array; 

  constructor(http: Http) {
  }

  ngOnInit() {
    this.result = http.get('friends.json')
                  .map(response => response.json());
   }
}






你可以注意到可观察者是懒惰的.因此,只有使用该subscribe方法附加在其上的侦听器才会调用相应的HTTP请求.



您还可以注意到,该map方法用于从响应中提取JSON内容,然后在可观察的处理中使用它.



希望这对你有帮助,蒂埃里

        
Thierry Templier这是一个很好的答案,但有一点我不清楚,我认为http.get('friends.json').map(response => response.json())返回observable >.如果是,那么你怎么把它发送到this.result？他们是不同的类型. 

3> 小智..：
import { HttpClientModule } from '@angular/common/http';




HttpClient API是在4.3.0版本中引入的.它是现有HTTP API的演变,并拥有自己的包@ angular/common/http.最值得注意的变化之一是,现在响应对象默认为JSON,因此不再需要使用map方法解析它.我们可以使用如下所示



http.get('friends.json').subscribe(result => this.result =result);


            

    


    


    

        
推荐阅读

        

            
        

    


    























    


    

        

            
            

                
                    devbox
                
            


            

                手机用户2402852307            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    




    








    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有