[Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface
When communicating with some backend API, data travels over the network using the HTTP protocol. As such, failures may occur, be it on our own device (i.e. the browser) or on the server-side which may not be available or unable to process our request. We need to handle such error responses and give the user a proper feedback.
import { HttpErrorResponset } from '@angular/common/http'; export class AppComponent {
people;
message;
constructor(private peopleService: PeopleService) {} fetchPeople() {
this.peopleService
.fetchPeople()
.subscribe(
(data) => {
this.message = null;
this.people = data;
},
(err: HttpErrorResponse) => {
if (err instanceof Error) {
// client-side error
this.message = `An error occured ${err.error.message}`;
} else {
this.message = `Backend returned error code ${err.status}, body was: ${err.message}`;
}
}
);
}
}
[Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface的更多相关文章
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- angular源码分析:angular中各种常用函数,比较省代码的各种小技巧
angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...
- angular源码分析:angular中的依赖注入式如何实现的
一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...
- angular源码分析:angular源代码的获取与编译环境安装
一.安装git客户端 1.windows环境推荐使用TortoiseGit. 官网地址:http://tortoisegit.org 下载地址:http://tortoisegit.org/downl ...
随机推荐
- 非阻塞IO函数
关于效率的优化:
- POJ 2111
记忆化搜索即可,设DP[I][J]为可到达的最大步数. 输出时用了一种较笨拙的方法,还有一种方法是使用最长上升子序列的方式,挺好,先排序,这让我想起上次BESTCODER的一题 #include &l ...
- 【C++】通用单链表
在C++的学习中,採用模板类,而採用虚函数实现多态性.达到通用的目的.结点类数据域被改造为指针,而把数据放在一个抽象类中.由指针与之建立联系. 採用虚函数实现多态性,达到通用的目的.堆内存的分配与释放 ...
- pl/sql sql窗口允许输出和允许变量替换
pl/sql sql窗口允许输出和允许变量替换 允许输出:类似在命令窗口中输入的 setserveroutput on; 允许变量替换:如果点击了这个,类似于执行 set define off命令 在 ...
- [Tailwind] Get started with Tailwindcss
In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. ...
- do while 循环和while循环的差别
do while 循环和while循环的差别 1.do while循环是先运行循环体,然后推断循环条件,假设为真,则运行下一步循环,否则终止循环. while循环是先推断循环条件,假设条件为真则 ...
- python爬虫系列:Scrapy安装与使用
这篇博文主要写Scrapy框架的安装与使用 Scrapy框架安装 命令行进入C:\Anaconda2\Scripts目录,运行:conda install Scrapy 创建Scrapy项目 1)进入 ...
- Android Activity组件的启动过程
0.总图 1.总图中的第一步,Laucher主线程向ActivityManagerService进程发出START_ACTIVITY_TRANSACTION 如图:第一步 ~/Android/fram ...
- spring batch(一):基础部分
spring batch(一):基础部分 博客分类: Spring java spring batch 官网: http://www.springsource.org/spring-batch 下 ...
- Spring In Action读书笔记
第一章 1.Spring採用4种策略减少Java开发复杂度 基于POJO的轻量级和最小侵入性编程 依赖注入和面向接口实现松耦合 基于切面和惯例进行声明式编程 通过切面和模板降低样板式代码 PS:POJ ...