开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

停止在每个ngOnInit()上调用API

在每个ngOnInit()上调用API是一种常见的做法，用于在组件初始化时获取数据或执行其他必要的操作。然而，频繁调用API可能会导致性能问题，特别是在页面加载时。为了优化性能并减少不必要的API调用，可以采取以下措施：

批量请求：将多个API请求合并为一个请求，减少网络开销和延迟。可以使用技术如GraphQL或RESTful API的批量操作来实现。
缓存数据：对于不经常变化的数据，可以将其缓存到本地或服务器端，避免重复的API调用。可以使用技术如Redis或Memcached来实现数据缓存。
延迟加载：将API调用延迟到真正需要数据的时候再进行，而不是在组件初始化时就调用。可以使用技术如懒加载或按需加载来延迟API调用。
数据预取：提前获取可能需要的数据，以减少后续API调用的次数。可以在路由导航前预取数据，或者使用预加载策略来获取数据。
数据共享：将数据共享给多个组件，避免重复的API调用。可以使用技术如状态管理库（如NgRx）或服务来实现数据共享。
错误处理：在调用API时，要处理可能出现的错误情况，例如网络错误或服务器错误。可以使用技术如拦截器或错误处理器来统一处理API调用的错误。

总结起来，停止在每个ngOnInit()上调用API的方法包括批量请求、缓存数据、延迟加载、数据预取、数据共享和错误处理。这些方法可以提高性能、减少API调用次数，并改善用户体验。

腾讯云相关产品和产品介绍链接地址：

批量请求：腾讯云API网关（https://cloud.tencent.com/product/apigateway）
缓存数据：腾讯云Redis（https://cloud.tencent.com/product/redis）
延迟加载：无特定产品，可根据具体需求选择合适的延迟加载策略
数据预取：腾讯云CDN（https://cloud.tencent.com/product/cdn）
数据共享：腾讯云COS（https://cloud.tencent.com/product/cos）
错误处理：无特定产品，可根据具体需求选择合适的错误处理方案

相关搜索:Facebook javascript api调用已停止发送 Jenkins脚本管道-在执行每个阶段后调用REST API JS在.on()上停止传播 ng-在ngOnInit()上打开引导模式 ngOnInit上的Angular5服务调用不起作用上一次调用的每个项目的Rx Java和Retrofit api调用为什么在NgOninit上更改家长数据不会导致ExpressionChangedAfterItHasBeenCheckedError？为什么调用方法后在ngOnInit中会得到空数组？为每个API资源调用相同的lambda函数可以使用AutocompleteInput停止ReferenceInput上的API调用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular 组件通信

上一篇，我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在 Angular 开发中，其组件之间的通信是怎么样的呢？

02

AngularDart 4.0 高级-生命周期钩子顶

Angular创建它，渲染它，创建和渲染它的子项，在数据绑定属性发生变化时对其进行检查，并在将它从DOM中删除之前对其进行销毁。

01

RxJS 处理多个Http请求

有时候进入某个页面时，我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式，使用串行或并行的方式。

02

Angular开发实践（五）：深入解析变化监测

什么是变化监测在使用 Angular 进行开发中，我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。而这些绑定的值之所以能在视图与模型之间保持同步，正是得益于Angular中的变化监测。简单来说，变化监测就是 Angular 用来监测视图与模型之间绑定的值是否发生了改变，当监测到模型中绑定的值发生改变时，则同步到视图上，反之，当监测到视图上绑定的值发生改变时，则回调对应的绑定函数。变化监测的源头变化监测的关键在于如何最小粒度地监测到绑定的值是

08

Rxjs 中怎么处理和抓取错误

使用 Rxjs，对于初学者来说，当我们处理 observables 错误的时候容易疑惑，因为我们会考虑使用 try-catch 方式捕获。但是，Rxjs 是通过操作符来管理错误。

01

Angular constructor vs ngOnInit

在 Angular 学习过程中，相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑，本文我们会通过实际的例子，为读者一步步解开困惑。

02

基础 | Angular2生命周期钩子函数

作者｜小处成就大事原文｜http://www.jianshu.com/p/ad86e239692a Angular每个组件都存在一个生命周期，从创建，变更到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力，掌握生命周期，可以让我们更好的开发Angular应用。概述每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit， Angular在创建组件后立刻调用它生命周期执行顺

04

Angular核心-组件的生命周期函数钩子函数

angular手册地址： https://angular.cn/guide/lifecycle-hooks Angular中的组件的生命周期钩子函数调用顺序：

02

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

注意：上面的this.http.get... 处理HTTP最好放到单独的Service文件中，再注入到Component。这里为了演示没有这么做。

01

使用angular4和asp.net core 2 web api做个练习项目(三)

下面将开发登陆和授权的部分, 这里要用到identity server 4. 在VS解决方案中设置多个项目同时启动: AspNetIdentityAuthorizationServer就是author

08

angular面试题及答案_angular面试

ngAfterContentInit:当把内容投影进组件之后调用，第一次调用ngDocheck()之后调用，只调用一次，只适用于组件

Angular 的生命周期

接触过 react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中，是避免不了的。

02

【Angular教程】-组件通信｜8月更文挑战

上一篇我们初步了解的Angular中组件及基本的使用,但是所有的功能要是放到一个组件里面必然显得更加冗余,臃肿,我们通常会将组件按照一定的规则进行拆分,拆分后的组件免不了的就需要进行通信,这一篇我们就来一起熟悉一下Angular中的组件通信吧。

03

Angular2 页面的生命周期

当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。

02

Angular学习笔记（一）

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。 Angular 模块都是一个带有 @NgModule 装饰器的类。 NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

02

Angular2 -- 生命周期钩子

指令和组件的实例有一个生命周期：新建、更新和销毁。每个接口都有唯一的一个钩子方法，它们的名字是由接口名加上 ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit。指令和组件 ngOnInit：当Angular初始化完成数据绑定的输入属性后，用来初始化指令或者组件。 ngOnChanges：当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。 ngDoCheck：用来检测所有变化（无论是Angular本身能检测还是无法检测的），并作出相应行动。在每次执行“变更检测”时被调用。 ngOnDestory：在Angular销毁指令或组件之前做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄漏。只适用于组件 ngAfterContentInit：当Angular把外来内容投影进自己的视图之后调用。 ngAfterContentChecked：当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。 ngAfterViewInit：在Angular创建完组件的视图后调用。 ngAfterViewChecked：在Angular检查完组件视图中的绑定后调用。

02

使用Angular8和百度地图api开发《旅游清单》

本文的目的是通过一步步实现一个旅游清单项目，让大家快速入门Angular8以及百度地图API。我们将收获：

03

浅谈Hooks&&生命周期(2019-03-12)

现在流行的前端框架，无论是angular还是React，又或是Angular2以及以上，都由框架自身提供了生命周期（有的叫生命周期钩子）供开发者使用。

04

Angular 自定义指令 Tooltip

Yeah，关注我的读者应该知道，上一篇文章了解 Angular 开发的内容，我们已经概览了 Angular 的相关内容。在自定义指令的部分，我们已经能够实现编写，但是，在实际场景中，我们还需要标准化的管理。

01

从 Angular Route 中提前获取数据

—\ntheme: fancy\n—\n\n### 介绍\n\n提前获取意味着在数据呈现在屏幕之前获取到数据。本文中，你将学到，在路由更改前怎么获取到数据。通过本文，你将学会使用 resolver，在 Angular App 中应用 resolver，应用到一个公共的预加载导航。\n\n### 你为什么应该使用 Resolver\n\nResolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单，没有数据时，你想向用户一个空的表单，当在加载用户数据时展示一个 loader，然后当数据返回时，填充表单并隐藏 loader。\n\n通常，我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说，组件加载完之后，我们发起数据请求。\n\n在 ngOnInit() 中操作，我们需要在每个需要的组件加载后，在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader，而不是每个路由中都添加 loader。\n\n本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。\n\n### 在应用中使用 Resolver\n\n为了在应用中使用 resolver，你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟，而不需要自己开发。\n\nJSONPlaceholder 是一个很棒的接口资源，你可以借助它更好学习前端的相关概念而不被接口所约束。\n\n现在，接口的问题解决了，我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务，所以我们将创建一个服务。\n\nbash\n ng g s resolvers/demo-resolver --skipTests=true\n\n\n> –skipTests=true 跳过生成测试文件\n\nsrc/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法，它有两个参数：route（ActivatedRouteSnapshot 的实例）和 state(RouterStateSnapshot 的实例)。\n\nloader 通常是在 ngOnInit() 中编写所有的 AJAX 请求，但是逻辑将会在 resolver 中实现，替代 ngOnInit()。\n\n接着，创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用，接着在路由中配置 resolve信息，（页面将会等待）直到 resolver 被处理。在 resolver 被处理之后，我们可以通过路由来获取数据然后展示在组件中。\n\n### 创建服务并编写逻辑获取列表数据\n\nbash\n ng g class models/post --skipTests=true\n\n\npost.ts\n\ntypescript\nexport class Post {\n id: number;\n title: string;\n body: string;\n userId: string;\n}\n\n\nmodel 就绪，是时候获取帖子 post 的数据了。\n\npost.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport { HttpClient } from "@angular/common/http";\nimport { Post } from "../models/post";\n\n@Injectable({\n providedIn: "root"\n})\nexport class PostsService {\n constructor(private _http: HttpClient) {}\n\n getPostList() {\n let URL = "https://jsonplaceholder.typicode.com/posts";\n return this._http.get<Post[]>(URL);\n }\n}\n\n\n现在，这个服务随时可被调用。\n\ndemo-resolver.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport {\n Resolve,\n ActivatedRouteSnapshot,\n RouterStateSnapshot\n} from "@angular/router";\nimport { PostsService } from "..

03

[译]Rxjs&Angular-退订可观察对象的n种方式

在angular项目中我们不可避免的要使用RxJS可观察对象(Observables)来进行订阅(Subscribe)和退订(Unsubscribe)操作;

00

Angular 6 HttpClient 快速入门

本教程将介绍如何在 Angular 6.x 中使用 HttpClient 发送 Http 请求，如 get、post、put 和 delete 请求。在 Angular 4.3+ 版本之后引入了 HttpClientModule 模块，该模块提供的 HttpClient 服务是已有 Angular HTTP API 的演进，它在一个单独的 @angular/common/http 包中。

03

详解ANGULAR2组件中的变化检测机制（对比ANGULAR1的脏检测）

组件和变化检测器如你所知，Angular 2 应用程序是一颗组件树，而每个组件都有自己的变化检测器，这意味着应用程序也是一颗变化检测器树。顺便说一句，你可能会想。是由谁来生成变化检测器？这是个好问题，它们是由代码生成。 Angular 2 编译器为每个组件自动创建变化检测器，而且最终生成的这些代码 JavaScript VM友好代码。这也是为什么新的变化检测是快速的 (相比于 Angular 1.x 的 $digest)。基本上，每个组件可以在几毫秒内执行数万次检测。因此你的应用程序可以快速执行，而无需调

09

Angular 从入坑到挖坑 - 组件食用指南

angular 入坑记录的笔记第二篇，介绍组件中的相关概念，以及如何在 angular 中通过使用组件来完成系统功能的实现

03

使用angular4和asp.net core 2 web api做个练习项目(四)

Auth Guard 该系统的大部分页面都应该是用户登陆以后才可以看见, 没有登陆的话直接应该跳转到登陆页面. 首先建立authguard: ng g g guards/auth 代码: import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { Observabl

Angular 6.x 基础教程

若想进一步了解 Angular CLI 的详细信息，请参考 Angular CLI 终极指南。

02

Angular 中使用 Api 代理

作为前端开发，我们跟后端对接接口是很频繁的事情，但是，我们对接的过程中总是遇到跨域的问题，那么我们如何解决呢？

01

Angular系列教程-第三节

1.ng generate指令使用 1.1缩写ng g 1.2创建类 ng generate class video/video 创建类 1.3创建组件 ng generate component video/video 创建组件

02

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

介绍RxJS前，先介绍Observable 可观察对象（Observable）可观察对象支持在应用中的发布者和订阅者之间传递消息。可观察对象可以发送多个任意类型的值 —— 字面量、消息、事件。基本用法和词汇作为发布者，你创建一个 Observable 的实例，其中定义了一个订阅者（subscriber）函数。当有消费者调用 subscribe() 方法时，这个函数就会执行。订阅者函数用于定义“如何获取或生成那些要发布的值或消息”。要执行所创建的可观察对象，并开始从中接收通知，你就要调用它的 s

02

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。

02

AngularDart4.0 英雄之旅-教程-06服务顶

不是一遍又一遍复制和粘贴相同的代码，而是创建一个可重用的数据服务，并将其注入到需要它的组件中。使用单独的服务可使组件保持精简并专注于支持视图，并使用模拟服务对组件进行单元测试变得容易。

01

angular基础面试题_java web面试题

Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

05

Angular 服务

本节课的重构完成之后，HeroesComponent 变得更精简，并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。

07

AngularDart4.0 英雄之旅-教程-08HTTP 顶

你离开的地方在前一页中，您学会了在仪表板和固定英雄列表之间导航，沿途编辑选定的英雄。这是这个页面的起点。

03

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例，来一步步介绍自定义属性指令的相关知识。在正式开发前，我们可以先看一下，最终效果 Stackblitz - Custom-Attribute-Directive。

03

Xcode9 新特性之Main Thread Checker前言

前言 2017年9月23日，写在 iPhone8和iPhone X发布10日之际。给公司处于业务膨胀期，导致近期一直很忙，晚上经常加班到10点，加班到凌晨2点钟也是常有发生。今天恰逢周六，深感有必要给自己充充电了，于是网上翻看了下关于Xcode 9新特性的一系列文章，其中有说道Main Thread Checker（翻译过来大概就是主线程检查器）。关于这个名词，网上还没有文章介绍。结合官方文档，我在这里简单的概括下。如果哪里有纰漏，还请阅读者给出提醒。看了官方文档上的介绍，着实认为这个技术非常棒。这个M

03

angular知识点梳理第三篇-组件

> 这里我是有些偷懒的，因为我看了官网的解释以后，我自己不太能知道怎么再使用我自己的语言重新给你们描述一次，你们可以选择直接看我的这个demo，简单暴力，也可以选择看一下官方的解释，本身就是白话文，所以就没有翻译的必要了。angular生命周期

01

【Angular】Angula6中的组件通信

Angula6_组件通信本文主要介绍 Angular6 中的组件通信一、父子组件通信 1.1 父组件向子组件传递信息方法一在父组件上设置子组件的属性父组件绑定信息 <app-child childTitle="可设置子组件标题"></app-child> 子组件接收消息 import { Component, OnInit, Input } from '@angular/core'; @Input childTitle: string; 方法二父组件调用子组件的方法父组件触发消息 <app-c

02

angular知识点梳理第二篇-基本语法

文章目录前文回顾基本语法常见指令 NgModel NgFor NgIf Ng-container 管道前文回顾前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些angular的基本语法，这样有利于后面我们进行梳理别的知识点做一些铺垫基本语法常见指令 NgModel NgModel就和vue中的v-model的效果是一致的，只是写法会有一些区别，vue中是可以直接进行使用的，但是在angular中我们引入框架的一个核心模块FormsModule才

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭