在本地API上执行GET请求时创建Angular 2 observable失败 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

在执行服务中的方法时，有时会存在没有回调函数的情况，此时也必须执行 subscribe 方法，否则服务中的 HTTP 请求是没有真正发起的服务中的 getAntiMotivationalQuotes...4.1.3、提交数据到服务端在同后端接口进行交互时，获取数据一般用的是 get 请求，而当进行数据新增、更新、删除时则会使用 post、put、delete 这三个 HTTP 谓词在毒鸡汤这个接口中...'请求成功' : '请求失败', // 2、如果存在了 error 回调，则请求失败 error => msg = '请求失败' ), finalize...、转化，以及拦截请求的响应信息的双重效果，因此当我们注册了多个拦截器时，在发送请求时会按照我们添加的顺序进行执行，而在接受到请求响应时，则是按照反过来的顺序进行执行获取到导出的拦截器信息，就可以在根模块中去导入需要注册的拦截器...'请求成功' : '请求失败', // 2、如果存在了 error 回调，则请求失败 error => msg = '请求失败' ), finalize

7.6K1 0

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

基本用法和词汇作为发布者，你创建一个 Observable 的实例，其中定义了一个订阅者（subscriber）函数。当有消费者调用 subscribe() 方法时，这个函数就会执行。...当执行完毕后，这些值就会继续传给下一个处理器。订阅只有当有人订阅 Observable 的实例时，它才会开始发布值。...例如，http.get(‘/api’) 就会返回可观察对象。为什么NG使用observable而不是Promise？...防抖（这样才能防止连续按键时每次按键都发起 API 请求，而应该等到按键出现停顿时才发起）如果输入值没有变化，则不要发起请求（比如按某个字符，然后快速按退格）。...有一些关键的不同点：可观察对象是声明式的，在被订阅之前，它不会开始执行,promise是在创建时就立即执行的可观察对象能提供多个值,promise只提供一个,这让可观察对象可用于随着时间的推移获取多个值

7.3K2 0

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

是的

没有找到

Angular进阶教程2-

如果你在组件中\color{#0abb3c}{组件中}组件中的元数据\color{#0abb3c}{元数据}元数据上定义了providers，那么angular会根据providers为这个组件创建一个注入器...，Angular会对延迟加载模块初始化一个新的执行上下文，并创建一个新的注入器，在该注入器中注入的依赖只在该模块内部可见，这算是一个特殊的模块级作用域。...而且在代码编译打包时,可以执行tree shaking优化，会移除所有没在应用中使用过的服务。...从服务器请求数据 HttpClient.get() // 在服务类中去封装和服务端通讯的方法 public getHttpResult(code: string, name: string..._http.post(url, body); } 复制代码错误处理在调用接口的时候，当遇到接口请求失败或者报错的时候，前端需要做一些错误的提示信息展示，具体操作如下： this.

5.9K3 0

在使用angular2中使用nodejs创建服务器,并成功获取参数

首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...("/api/products",(req,res)=>{ res.json(products) }) app.get("/api/products/:id",(req,res)=>{ //在命令行中打印...const server =app.listen(8000,"localhost",()=>{ console.log("服务器已经启动,地址是http://localhost:8000") }); 接着在本地从创建好的服务器上获取数据...any> 将获得的数据保存为流.对应的需要引入Observable from "rxjs" http服务已经在app.module中引入过了,这里需要声明在构造函数里头,并引入Http from "@...angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务器上的数据: 接下来还有配置: 在根目录新建一个文件:proxy.conf.json 内容为: { "/api":{

5.9K7 0

【Appetite】ionic3实录（五）基本服务实现

前面章节我们都是用命令行来操作，如ionic g page person，现在开始会涉及到很多命令操作，可能有些人会记不住命令，或者记不清关键字，可以像我这样，在IDE上装上插件，我这用的是VS Code...，装了插件后，src目录右键会出现Ionic Generate的快捷菜单，点击后弹出选择界面，输入名称即可自动创建。...方法(isJoinHost是为了兼容获取应用内部数据) * @param url 请求url * @param isJoinHost 是否合并到主机地址 */ get(url: string...因为目前大多插件的异步使用Promise，Observable转Promise比较简单，而Promise转Observable比较麻烦，为了更方便集成，所以把官方推荐的Observable方式转成Promise...方式，大家可基于Observable优点考虑仍沿用Observable也行。

4.5K4 0

Angular: 最佳实践

这在处理来自 RESTful API 数据的时非常有用。...注意我们是怎么在组件类上创建一个 statuses 字段，以便我们可以在模版中使用这个枚举。但是假如我们在多个组件中使用这个枚举呢？或者假如我们要在不同的组件使用其他枚举呢？我们需要不停创建这些字段？...小经验：当我们在带有子元素的 HTML 元素上编写 ngFor 指令时，请考虑将该元素分离为单独的组件，就像下面：请求。Rx.js 允许你去缓存 HTTP 请求的结果（实际上，任何的 Observable 都可以，但是我们现在说的是 HTTP 这内容），并且有一些示例你可能想要使用它。...当然，国家不会每天都会发生变更，所以最好的做法就是拉取该数据并缓存，然后在应用程序的生命周期内使用缓存的版本，而不是每次都去调用 API 请求该数据。

4.3K4 0

RxJS 处理多个Http请求

有时候进入某个页面时，我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。...这个例子很简单，它只处理一个请求，接下来我们来看一下如何处理两个请求。 Map 和 Subscribe 有些时候，当我们发送下一个请求时，需要依赖于上一个请求的数据。...即我们在需要在上一个请求的回调函数中获取相应数据，然后在发起另一个 HTTP 请求。...forkJoin 操作符接收一个 Observable 对象列表，然后并行地执行它们。...any; ngOnInit() { let post1$ = this.http.get(`${this.apiUrl}/1`); let post2$ = this.http.get

7.4K2 0

使用 Angular Transfer State 的一个具体例子

当您单击城市名称时，该应用程序会显示该城市的当前天气。因为我们希望我们的应用程序是可抓取和可索引的，所以我们使它通用：城市页面在服务器上呈现，存储为 HTML 文件并由 HTTP 服务器提供服务。...复制代码现在，在为组件提供数据的解析器中，我们可以使用 TransferState API：在服务器上，我们首先注册 onSerialize 以提供我们将下载的数据，然后我们从我们的数据提供者那里获取数据...，这里是一个 HTTP GET 请求。...在浏览器上，我们使用get方法来获取server提供的数据，我们直接提供这些数据。我们还从传输状态中删除了提供的数据，因此页面的重新加载将不再使用提供的数据。...我们可以通过调用 hasKey 方法来检测我们是在服务器上还是在浏览器应用程序上。此方法仅在浏览器中返回 true。

1.1K0 0

解锁 Angular HttpClient 的 Fetch 模式：withFetch 深度剖析

在早期的 Angular 版本中，HttpClient 默认基于 XMLHttpRequest（XHR） API 实现 HTTP 请求。...XHR 在浏览器中兼容性广，但它存在冗长的回调处理、配置拦截器时的复杂度，以及在服务端渲染（SSR）环境中性能和兼容性上的局限。...随着 Web 平台的发展，Fetch API 作为更现代、更简洁的 HTTP 请求方案逐渐成为主流。...Fetch 则基于 Promise，为 GET、POST 等请求提供统一接口，支持链式调用和 async/await，但不支持上传进度报告。...当使用 Angular 默认的 XHR 模式时，HttpClient 内部会创建 XMLHttpRequest 实例，并在它们之上封装 RxJS Observable，将 onload、onerror、

4551 0

Angular进阶：理解RxJS在Angular应用中的高效运用

在Angular应用中，RxJS的高效运用主要体现在：异步操作处理RxJS的核心优势在于处理异步操作，如HTTP请求、定时任务、事件监听等。...在Angular中，你可以使用HttpClient模块配合RxJS的Observable来发起HTTP请求，这使得请求和响应的管理变得简洁且易于理解。... { return this.http.get('https://api.example.com/data'); }}状态管理RxJS的Subjects和BehaviorSubjects...import { map } from 'rxjs/operators';getData(): Observable { return this.http.get('https://api.example.com...}); }}性能优化通过使用RxJS的share、shareReplay等操作符，可以避免不必要的多次订阅，提高应用性能，尤其是在处理高频率更新的数据流时。

4.8K1 1

SNS项目笔记--RXjs简要用法

Angular升级到2过后，一直延续着promise做流处理，但是它自身携带的RXjs又是处理流的利器。...本篇从实战角度出发，简要的概括它的两个使用方法 1、极简HTTP请求 1.1、创建provider 在命令行输入ionic g provider youProviderName 在创建好后，系统会自动导入从...@angular/http里导入Http这个类，方便后续做直接使用此类做HTTP请求。...1.3、get、post请求 //由于rxjs包很大，内容很多，我们取有需要的即可 import 'rxjs/add/operator/map'; import { Observable } from...2、回调监听--组件中通讯在写ionic时发现当页面pop()的时候，竟无返回响应机制，这个时候，页面与页面就可以使用RXjs进行传播串接起来，类似于Android里面的EventsBus，Otto等

1.5K4 0

Angular 6 HttpClient 快速入门

本教程将介绍如何在 Angular 6.x 中使用 HttpClient 发送 Http 请求，如 get、post、put 和 delete 请求。...在 Angular 4.3+ 版本之后引入了 HttpClientModule 模块，该模块提供的 HttpClient 服务是已有 Angular HTTP API 的演进，它在一个单独的 @angular..._page=1&_limit=10" ) .pipe(tap(console.log)); } } 设置查询参数假设发送 Get 请求时，需要设置对应的查询参数，预期的 URL..._page=1&_limit=10 创建 HttpParams 对象 import { HttpClient, HttpParams } from "@angular/common/http"; const...总结本文通过 jsonplaceholder 提供的 API，介绍了如何使用 HttpClientModule 模块中的 HttpClient 服务，发送 Get、Post、Delete 等请求，同时介绍了如何利用

7.2K3 0

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

冷热Observable 冷Observable从被订阅时就发出整个值序列热Observable无论是否被订阅都会发出值，机制类似于javascript事件。...Angular应用中的Http请求 Angular应用中基本HTTP请求的方式: import { Injectable } from '@angular/core'; import { Observable...先回顾一下上面的http请求代码: getHeroes(): Observable>{ return this.http.get(this.all_hero_api...,{observe:'response'}); } http请求默认返回一个冷Observable，每当返回的流被订阅时就会触发一个新的http请求,Rxjs中通过shareReplay( )操作符将一个可观测对象转换为热...Observable（注意：shareReplay( )不是唯一一种可以加热Observable的方法），这样在第一次被订阅时，网络请求被发出并进行了缓存，之后再有其他订阅者加入时，就会得到之前缓存的数据

8.1K2 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

Angular提供了一组生命周期hooks（特殊事件），可以被分接到生命周期中，并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...ngAfterViewInit：Angular创建组件的视图后。 ngAfterViewChecked：在Angular检查组件视图的绑定之后。 2. ...从堆栈溢出就是一个区别：当异步操作完成或失败时，Promise会处理一个单个事件。 Observable类似于（在许多语言中的）Stream，当每个事件调用回调函数时，允许传递零个或多个事件。...通常Observable比Promise更受欢迎，因为它不但提供了Promise特性，还提供了其它特性。使用Observable可以处理0,1或多个事件。你可以在每种情况下使用相同的API。...如果服务器的HTTP请求结果或其它一些异步操作不再需要，则Observable的订阅者可以取消订阅，而Promise将最终调用成功或失败的回调，即使你不需要通知或其提供的结果。

24.8K8 0

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

从angular2到现在的angular5http模块也有些变化。...我是这样设计的，把api请求封装成一个基类，然后在此基础上封装一个针对后台apb框架的基类，最后才是我们应用所需要的api请求数据组件。 ?...; } /** * GET请求 * * @param {string} url URL地址 * @param {*} [params] 请求参数 */ get.../api-base-service" import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs...简单实现添加点动画效果定义两组动画：入场浮动动画，点击喜欢时的动画效果在share文件夹下添加一个动画效果文件animations.ts。

2.3K3 0

Angular2 拦截器（页面请求修改Url+headers传值+获取服务器返回的错误信息）

(url = environment.api + url) : (url.url = environment.api + url.url); if (typeof url === 'string...environment.self : environment.api) + url.url; //当我们才用这种方式来传headers的信息的时候下面的get，post等方法可以不写...: RequestOptionsArgs) : Observable { return super.get(url, this.getRequestOptionArgs...console.log(options); return options; } //请求发生错误是提示信息 intercept(observable : Observable...StorageService] } //主要结束 ], bootstrap: [AppComponent] }) export class AppModule { } 这样我们使用调用http时，

4.1K2 0

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api....然后使用FileStream创建该文件. 后边的内容就是把文件名保存到数据库了. 接下来, 使用Postman来测试这个api. 打开postman, 按照图示输入: ?...然后创建一个photo.service: import { Injectable } from '@angular/core'; import { HttpHeaders, HttpClient } from...首先创建一个修改photo service: 根据官方文档, 如果想要上传文件时显示进度, 那么应该使用HttpRequest, 并设置属性reportProgress为true: import { Injectable...实际上, 选择Slow 3G就很慢了. 这时, 再上传一次试试效果: ? 很好, 没问题.

3.7K5 0

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

在 Angular 应用开发过程中　Observable　扮演着处理异步操作与数据流的关键角色　RxJS　为 Angular 提供了丰富的操作符与工具链　开发者在编写业务逻辑时　往往会面临 Observable...中　HttpClient　模块返回的 Observable 实例默认是冷 Observable　只有在订阅后才会真正发起 HTTP 请求　在需要调用外部 API 或后端服务时　开发者常常需要手动调用...Angular 应用在涉及多重数据源交互时　手动订阅 Observable 能够实现多个数据流的协调处理　开发者可以在 subscribe 方法的回调中对获取的数据进行条件判断、动态分支选择以及后续的状态更新操作...API 进行调用时　手动订阅 Observable 所带来的便利与必要性　在此场景中　HttpClient 返回的 Observable 是冷 Observable　只有在订阅后才会执行 HTTP 请求...与 interval 两个具体示例　展示了在网络请求、定时任务、用户交互、组件间通信等多种场景下手动调用 subscribe 方法的重要性　希望能够帮助 Angular 开发者在面对实际业务需求时　做出正确的技术选型

4561 0

Angular JSONP 详解

但它也有缺点，即只支持 Get 请求，因为是通过方式引用资源，相关的参数都显式的包含在 URL 中。...接着在经过一小段时间，控制台输出了相关的数据。四、Angular JSONP 原理简析在了解 JSONP 的工作原理之后，再看 Angular 的源码就清晰简单很多。...在 Angular HttpClient 拦截器这篇文章中，我们已经介绍了拦截器的作用与使用。...当发现当前请求的请求方法为 'JSONP' 时，则会把请求代理给 JsonpClientBackend 服务进行处理。...cleanup(); // 请求失败构造响应对象 if (!

3.1K4 1

Angular开发实践（六）：服务端渲染

提升手机和低功耗设备上的性能有些设备不支持 JavaScript 或 JavaScript 执行得很差，导致用户体验不可接受。...示例解析下面将基于我在GitHub上的示例项目 angular-universal-starter 来进行讲解。...endpoints - app.get('/api/**', (req, res) => { }); */ // Server static files from /browser app.get...它是在这个服务器上运行时才需要的一些可选的 Angular 依赖注入提供商。当你的应用需要那些只有当运行在服务器实例中才需要的信息时，就要提供 extraProviders 参数。...在 ngOnInit 中根据 this.state.get(KFCLIST_KEY, null as any) 判断数据是否存在（不管是服务端还是客户端），存在就不再请求，不存在则请求数据并通过 this.state.set

6K10 0

点击加载更多

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

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

Angular进阶教程2-

在使用angular2中使用nodejs创建服务器,并成功获取参数

【Appetite】ionic3实录（五）基本服务实现

Angular: 最佳实践

RxJS 处理多个Http请求

使用 Angular Transfer State 的一个具体例子

解锁 Angular HttpClient 的 Fetch 模式：withFetch 深度剖析

Angular进阶：理解RxJS在Angular应用中的高效运用

SNS项目笔记--RXjs简要用法

Angular 6 HttpClient 快速入门

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

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

Angular2 拦截器（页面请求修改Url+headers传值+获取服务器返回的错误信息）

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

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

Angular JSONP 详解

Angular开发实践（六）：服务端渲染

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐