从angular服务返回observable - 腾讯云开发者社区

文章/答案/技术大牛

发布

Angular2 之 Promise vs Observable

调用情况 Observable 还具有可订阅性，对于 Cold Observable 而言，只有订阅后才开始起作用 Promise 一经产生便开始起作用总结：在视频中有详细的介绍。...Observable，由于可以有任意多个数据，因此需要一个额外的状态来表示完成，一经完成后便不能再产生数据。...运算符 Promise ，由于有且只有一个数据，所以无需复杂的操作，仅需要一个简单的变换（返回值）或者组合（返回另一个 Promise）功能即可，甚至还可以把组合变换与使用统一为一个操作，也就是我们的...对于组合，（最简单的方式）需要使用 .mergeMap 方法，用来把两个 Observable 整合为一个 Observable；对于使用，我们需要使用 .subscribe 方法，用来通知 Observer...当然还可能有另一类运算符，比如 .toPromise 等，这些并不返回 Observable 的方法其实本身并不是一个运算符，仅仅是对 Observable 的原型扩展。

8542 0

Angular快速学习笔记(4) -- Observable与RxJS

比如：从promise创建一个Observable： import { fromPromise } from 'rxjs'; // Create an Observable out of a promise...import { Component } from '@angular/core'; import { Observable } from 'rxjs'; @Component({ selector...的 HttpClient 从 HTTP 方法调用中返回了可观察对象。...例如，http.get(‘/api’) 就会返回可观察对象。为什么NG使用observable而不是Promise？...可观察对象不会修改服务器的响应（和在承诺上串联起来的 .then() 调用一样）。

7.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Angular 服务

添加 getHeroes() 创建一个函数，以从服务中获取这些英雄数据。...它可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象）。...() 会返回 Observable。...在稍后的 HTTP 教程中，你就会知道 Angular HttpClient 的方法会返回 RxJS 的 Observable。...这节课，你将使用 RxJS 的 of() 函数来模拟从服务器返回数据。打开 HeroService 文件，并从 RxJS 中导入 Observable 和 of 符号。

4.9K7 0

Angular 从入坑到挖坑 - HTTP 请求概览

对应官方文档地址： Angular HttpClient 配套代码地址：angular-practice/src/http-guide 二、Contents Angular 从入坑到弃坑 - Angular...使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览三、Knowledge Graph ?...constructor(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } } 4.1.2、从服务端获取数据...在处理错误信息的回调方法中，方法返回了一个 HttpErrorResponse 对象来描述错误信息因为这里的错误更多是服务在与后端进行通信产生的错误，因此对于错误信息的捕获和处理更应该放到服务中进行，...而在组件处仅显示错误提示在服务中定义一个错误处理器，用来处理与后端请求中发生的错误 import { Injectable } from '@angular/core'; import { Observable

7.6K1 0

Angular进阶教程2-

依赖注入(DI) 依赖项( 服务/对象 )注入是一种设计模式，在这种设计模式中，类会从外部源请求依赖项\color{#0abb3c}{请求依赖项}请求依赖项而不是创建它们。...) { } } 复制代码使用HttpClient\color{#0abb3c}{HttpClient}HttpClient 返回的都是可观察对象（observable）类型的服务。...从服务器请求数据 HttpClient.get() // 在服务类中去封装和服务端通讯的方法 public getHttpResult(code: string, name: string...Observable和Observer，以及这个方法调用的返回对象，返回的是一个Subscription对象的实例化，接下来我们逐一介绍这些核心概念。...，返回也observable。

5.9K3 0

Angular 从入坑到挖坑 - Angular 使用入门

一、Overview angular 入坑记录的笔记第一篇，完成开发环境的搭建，以及如何通过 angular cli 来创建第一个 angular 应用。...Angular 从入坑到弃坑 - Angular 使用入门三、Knowledge Graph ?...全局安装 Angular CLI ## 在电脑上以全局安装的方式安装 angular cli npm install -g @angular/cli ?...验证是否安装成功 ## 查看 angular cli 版本 ng v ## 查看 angular cli 中的各种命令解释 ng help ?...4.1.2、运行第一个 Angular 应用通过 Angular CLI 命令来创建一个新的应用 ## 指定位置，创建新的 angular 应用 ng new my-app 常用命令参数 options

2.9K2 0

RxJS 处理多个Http请求

管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式，使用串行或并行的方式。...基础知识 mergeMap mergeMap 操作符用于从内部的 Observable 对象中获取值，然后返回给父级流对象。...forkJoin forkJoin 是 RxJS 版本的 Promise.all()，即表示等到所有的 Observable 对象都完成后，才一次性返回值。...Http 服务简单示例： import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular...一旦列表的 Observable 对象都发出值后，forkJoin 操作符返回的 Observable 对象会发出新的值，即包含所有 Observable 对象输出值的数组。

7.4K2 0

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...异步处理可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象） b. angular使用了Rxjs，因此使用Observable，Observable 是...HEROES) 会返回一个 Observable，它会发出单个值，这个值就是这些模拟英雄的数组。...的服务，用来与浏览器打交道，this.location.back() 返回上一页 HTTP a....HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制 b.

5.4K5 0

Angular 快速学习笔记(1) -- 官方示例要点

5.3K0 0

【iOS开发】RxSwift入门:从Observable.create讲起

example("of") { let one = 1 let two = 2 let three = 3 let observable = Observable.of...再说一下它跟Observable的关系，Observable发送的所有事件都是一个Event，同一个Observable发送的Event的泛型参数的类型肯定是一样的，就是说一个Observable不会即发送...像just empty等都是Observable的子类，就是内部封装好了泛型Element类型的特定Observable。...再订阅，那么你就可以通过异步的方式获取网络返回的结果了。...将上面的Observable做为一个方法的返回值，放到ViewModel里面。在Controller里面调用方法，再订阅，流程就比较清晰了。

9914 0

angular 中$q服务介绍

$q $q是angular中一个用来解决JS异步编程的服务，借鉴了 Kris Kowal’s Q 库，可以看作是一个轻量的Q库，遵循 Promises/A+的规范。...API 通过$q.defer()方法构造出一个实例，该实例有三个方法，分别是：resolve/接受promise成功的值，reject/接受promise被拒绝，notify/再一次异步任务中，可能返回多次...在$q.defer()方法构造出的实例中,有一个promise属性，用来返回一个promise对象。通过then方法，可以实现链式函数，来解决回调地狱的诟病。...var deferredS = $q.defer(); var _that = this; this.searchAfter(deferredA);//进行异步操作的函数，成功后返回...总结在JS中，解决异步模式问题的方法还有很多，比如回掉函数，事件监听，发布订阅等等，而angular的$q提供了一个轻量的promise库，虽然方法远没有Q库的丰富，但是基础方法都有，实用性较强，在解决异步问题时

1.4K5 0

augular 英雄之旅

创建服务模块 ng generate service hero 自动生成service文件，大概是说将会把服务注入到根组件中 import { Injectable } from '@angular/...core'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } } 从rxjs中获取...Observable类型和of方法，Observable泛型接口接口一个类型，of方法会可将这个类型包装成Observable import { Observable,of } from 'rxjs...'; import { Injectable } from '@angular/core'; import { Observable,of } from 'rxjs'; import { Hero }...providedIn: 'root', }) export class HeroService { constructor() {} //这里模拟异步，HttpClient.get() 它也同样返回一个

2.5K2 0

Angular定义服务-Learn By Doing

Angular服务的两大特点： Lazily instantiated – Angular only instantiates a service when an application component...官方提供的示例demo: Using a Service 2.内置(built-in)服务 Angular本身提供了非常多的内置服务，方便用户进行开发。...和后端打交道用到的$http,URL跳转用到的$location；动画相关的$animate服务等等。 Angular内置服务 3.自定义(custom)服务的五种方式 ?...因为它可以返回任何东西，所以在实际开发中使用的最多。它实际上是一个只有$get方法的provider。...Angular规定provider必须返回一个$get方法。provider是value,service和factory的封装。

1.2K9 0

Angular 使用 RxJS 优化处理多个Http请求

优化有顺序依赖的多个请求有些使用我们需要发起多个请求，根据第一个请求返回的结果中的某些内容，作为第二个请求的参数，比如下面代码。.../core'; import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import {....pipe( mergeMap(character => this.http.get(character.homeworld)) ); } } mergeMap 操作符用于从内部的...Observable 对象中获取值，然后返回给父级流对象。...可以合并 Observable 对象处理并发请求 forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值。

5.2K1 0

angular5面试题_大数据面试题

依赖就是具有一系列功能的服务(service)，应用程序中的各种组件和指令（derictives）可能需要服务的功能。...不过Angular给pipe做了优化，加了缓存，如果item和上次相等，则直接返回结果。...)，服务(service)和管道(pipe)进行分组的地方。...Promise返回一个值；Observable返回0至N个值。...选择从哪个版本升级到哪个版本后，会给出一步一步的升级命令，直接执行就好。

6.3K2 0

Angular JSONP 详解

一、什么是 JSONP JSONP（JSON with Padding）是数据格式JSON的一种 “使用模式”，可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。...利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据，而这种使用模式就是所谓的 JSONP。...通常我们使用都是引用的静态资源，其实它也可以用来引用动态资源（php、jsp、aspx 等），后台服务被访问后会返回一个 callback(data) 形式的字符串，由于是字符串，因此在后台的时候不会起到任何作用...，但返回浏览器端，放入标签之内，就是一个合法的函数调用，实参就是我们所需要的数据。...那是不是我们通过 HttpClient 服务发送的 JSONP 请求被 JsonpInterceptor 拦截器处理了。

3.1K4 1

Angular 与 rxjs 中 take(1) 的运用解析

对于一些 Angular 服务中调用 HTTP 请求的场景，HttpClient 返回的是一个 Observable 对象，该对象在成功返回数据后便无需继续监听数据流。...例如，在使用 Angular 内置 HttpClient 发起 HTTP GET 请求时，返回的 Observable 会在成功获取数据后发出一个响应数据。...以下是一个更加贴近实际业务场景的代码示例，展示了如何在 Angular 服务中调用 HttpClient，并使用 take(1) 处理一次性 HTTP 请求：import { Injectable }...from `@angular/core`;import { HttpClient } from `@angular/common/http`;import { Observable } from `rxjs...组件在 ngOnInit 生命周期钩子中订阅该 Observable，当 HTTP 请求成功返回数据后，订阅将被自动结束，不会再有额外的监听行为。

6790 0

【响应式编程的思维艺术】（5）Angular中Rxjs的应用示例

冷热Observable 冷Observable从被订阅时就发出整个值序列热Observable无论是否被订阅都会发出值，机制类似于javascript事件。...Angular应用中的Http请求 Angular应用中基本HTTP请求的方式: import { Injectable } from '@angular/core'; import { Observable.../message.service';//某个自定义的服务 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http...使用Rxjs构建Http请求结果的处理管道 3.1 基本示例尽管看起来Http请求的返回结果是一个可观测对象，但是它却没有map方法，当需要对http请求返回的可观测对象进行操作时，可以使用pipe操作符来实现...,{observe:'response'}); } http请求默认返回一个冷Observable，每当返回的流被订阅时就会触发一个新的http请求,Rxjs中通过shareReplay( )操作符将一个可观测对象转换为热

8.1K2 0

angular面试题及答案_angular面试

在传统的web技术中，客户端请求一个web页面(HTML/JSP/asp)，服务器返回资源(或HTML页面)，客户端再次请求另一个页面，服务器用另一个资源响应。...当observable或promise返回data时，我们使用一个临时属性来保存内容。稍后，我们将相同的内容绑定到模板。...Authentication (认证) ：用户登录凭据传递给(服务器上的)认证API。在服务器端验证凭据并返回JSON Web Token(JWT)。...Observer / Observable Observable（可观察者）接受一个Observer作为参数然后返回unsubscribe函数 – 特征：...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后，初始化指令、组件所以从angular的生命周期看，constructor是执行在先的所以既然ngOnchanges

15.4K12 0

Angular 应用中手动调用 subscribe 方法的时机与实践探讨

在 Angular 应用开发过程中　Observable　扮演着处理异步操作与数据流的关键角色　RxJS　为 Angular 提供了丰富的操作符与工具链　开发者在编写业务逻辑时　往往会面临 Observable...中　HttpClient　模块返回的 Observable 实例默认是冷 Observable　只有在订阅后才会真正发起 HTTP 请求　在需要调用外部 API 或后端服务时　开发者常常需要手动调用...所带来的便利与必要性　在此场景中　HttpClient 返回的 Observable 是冷 Observable　只有在订阅后才会执行 HTTP 请求　开发者通过手动调用 subscribe 方法对数据进行响应处理与错误捕捉...的回调函数分别进行定义与处理　这种精细化控制有助于实现复杂业务场景下的数据交互与状态管理Angular 应用中　服务与组件之间的数据通信有时借助 Subject 或 BehaviorSubject 实现...的执行机制与 Angular 生命周期的关系　在组件与服务中对订阅进行合理的管理　才能构建出既健壮又高效的应用程序　这种实践经验经过大量项目检验　已被业界广泛认同与应用本文通过 HttpClient

4451 0

点击加载更多

Angular2 之 Promise vs Observable

Angular快速学习笔记(4) -- Observable与RxJS

Angular 服务

Angular 从入坑到挖坑 - HTTP 请求概览

Angular进阶教程2-

Angular 从入坑到挖坑 - Angular 使用入门

RxJS 处理多个Http请求

Angular 快速学习笔记(1) -- 官方示例要点

Angular 快速学习笔记(1) -- 官方示例要点

【iOS开发】RxSwift入门:从Observable.create讲起

angular 中$q服务介绍

augular 英雄之旅

Angular定义服务-Learn By Doing

Angular 使用 RxJS 优化处理多个Http请求

angular5面试题_大数据面试题

Angular JSONP 详解

Angular 与 rxjs 中 take(1) 的运用解析

【响应式编程的思维艺术】（5）Angular中Rxjs的应用示例

angular面试题及答案_angular面试

Angular 应用中手动调用 subscribe 方法的时机与实践探讨

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐