当前位置：首页 > 编程日记 > 正文

Angular Http

编程日记 2024-05-31 03:40:00

Http服务

HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制。

启用Http服务的准备工作

要让 HttpClient 在应用中随处可用，需要在根模块的@NgModule.imports 数组中加入 HttpClientModule。

Http方法返回单个值

HTTP 是一个请求/响应式协议。你发起请求，它返回单个的响应。
所有的 HttpClient 方法都会返回某个值的 RxJS Observable。
通常，Observable 可以在一段时间内返回多个值。但来自 HttpClient 的 Observable 总是发出一个值，然后结束，再也不会发出其它值。

注：可观察对象(Observable) 是声明式的，即定义的用于发布值的函数，必须由消费者订阅后，该函数才会实际执行。

使用RxJS 的 of() 函数来模拟Observable：

getHeroes(): Observable<Hero[]> {return of(HEROES);
}

HttpClient.get()方法

方法参数：

URL地址
options参数(可选)

get()方法有如下特点：

构造一个GET请求，将主体解释为JSON并返回。
请求参数和对应的值附加在URL后面，利用 ? 号代表URL的结尾和请求参数的开始(GET请求特点)。
默认情况下把响应体当做无类型的 JSON 对象进行返回。如果指定了可选的模板类型 <Hero[]>，就会给返回你一个类型化的对象。其中，JSON 数据的具体形态是由服务器的数据 API 决定的。

  /*** Constructs a `GET` request that interprets the body as a JSON object and* returns the response body as a JSON object.** @param url     The endpoint URL.* @param options The HTTP options to send with the request.*** @return An `Observable` of the response body as a JSON object.*/get(url: string, options?: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType?: 'json';withCredentials?: boolean;}): Observable<Object>;

/* 查询操作 */
get(params): Observable<any> {return this.http.get(URL, {params:params}); // 这里的http为HttpClient实例
}

HttpClient.put()方法

方法参数：

URL 地址
body部分参数
options参数(可选)

  /*** Constructs a `PUT` request that interprets the body as a JSON object and returns the response* body as a JSON object.** @param url The endpoint URL.* @param body The resources to add/update.* @param options HTTP options** @return An `Observable` of the response, with the response body as a JSON object.*/put(url: string, body: any | null, options?: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType?: 'json';withCredentials?: boolean;}): Observable<Object>;

/* 修改操作 */
mod(params):Observable<any>{return this.http.put(URL, params);  // 这里的http为HttpClient实例
}

HttpClient.post()方法

方法参数：

URL地址
body部分参数
options参数(可选)

  /*** Constructs a `POST` request that interprets the body as a* JSON object and returns the response body as a JSON object.** @param url The endpoint URL.* @param body The content to replace with.* @param options HTTP options** @return An `Observable` of the response, with the response body as a JSON object.*/post(url: string, body: any | null, options?: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType?: 'json';withCredentials?: boolean;}): Observable<Object>;

/* 添加方法 */
add(params): Observable<any> {return this.http.post(URL, params); // 这里的http为HttpClient实例
}

HttpClient.delete()方法

URL地址
options参数(可选)

  /*** Constructs a `DELETE` request that interprets the body as a JSON object and* returns the response body as a JSON object.** @param url     The endpoint URL.* @param options The HTTP options to send with the request.** @return An `Observable` of the response, with the response body of type `Object`.*/delete(url: string, options?: {headers?: HttpHeaders | {[header: string]: string | string[];};observe?: 'body';params?: HttpParams | {[param: string]: string | string[];};reportProgress?: boolean;responseType?: 'json';withCredentials?: boolean;}): Observable<Object>;

/* 删除操作 */
del(no): Observable<any>  {return this.http.delete(URL + `/${no}`);  // 这里的http为HttpClient实例
}

添加和更新请求头

很多服务器都需要额外的头来执行保存操作。例如，服务器可能需要一个授权令牌，或者需要 Content-Type 头来显式声明请求体的 MIME 类型。

添加请求头

import { HttpHeaders } from '@angular/common/http';const httpOptions = {headers: new HttpHeaders({'Content-Type':  'application/json',Authorization: 'my-auth-token'})
};

更新请求头

你不能直接修改前面的选项对象中的 HttpHeaders 请求头，因为 HttpHeaders 类的实例是不可变对象。请改用 set() 方法，以返回当前实例应用了新更改之后的副本。

下面的例子演示了当旧令牌过期时，可以在发起下一个请求之前更新授权头。

httpOptions.headers =httpOptions.headers.set('Authorization', 'my-new-auth-token');

—— END ——

https://www.dkcj.cn/info/8602.html

2019第四周作业(基础作业+挑战作业）

基础题1： 输入一个正整数 n (1≤n≤10)和n 阶方阵a的元素，如果方阵a中的所有元素都沿主对角线对称，输出“Yes”, 否则，输出“No”。主对角线为从矩阵的左上角至右下角的连线，方阵a中的所有元素都沿主对角线对称指对所有…

编程日记2024/05/31 03:30:00

Taglib原理和实现：再论El和JST

作者： WalkingWithJava 出处： Java研究组织问题：你想和JSTL共同工作。比如，在用自己的标签处理一些逻辑之后，让JSTL处理余下的工作。看这个JSP例子： ＜% String name"diego"; reque…

编程日记2024/05/31 03:20:00

UWP Windows10开发获取设备位置（经纬度）

UWP Windows10开发获取设备位置（经纬度） 原文:UWP Windows10开发获取设备位置（经纬度）1.首先要在UWP项目的Package.appxmanifest文件中配置位置权限，如下图所示： 2.Package.appxmanifest后选择第三个选项卡…

编程日记2024/05/31 03:10:00

[零基础学JAVA]Java SE实战开发-37.MIS信息管理系统实战开发[JDBC](1)

MIS信息管理系统实战开发之使用MySQL实现保存开发背景ID、姓名、年龄为公共信息，而学生有成绩，工人有工资定义一个抽象类Person（ID、姓名、年龄），学生是其子类，有成绩，工人是其子类有工资ID如何…

编程日记2024/05/31 03:00:00

【数论总结】-----励志写好一篇数论总结↖(^ω^)↗//正在施工...未完工

近期学了学数论，来写一波总结吧。 （1）排列组合，比较基础的东西了吧。//只写个概念吧,(逃： 概念：就是从n个不同元素中，任取m(m≤n)个元素并成一组，叫做从n个不同元素中取出m个元素的一…

编程日记2024/05/31 02:50:00

遍历Treeview每个节点并初始化（C#）

搞了好久，哎，C#的一些控件用起来还没习惯，所以折腾啊。 TreeView的形成，必然要初始化，数据记录是从数据库中取得的，那么要先取再遍历。介绍下心得吧。首先，数据预期显示结果如下其次&#xff…

编程日记2024/05/31 02:40:00

codeforces3A

Shortest path of the king CodeForces - 3A 棋盘上的国王被单独放置。尽管他是孤独的，但并未伤心，因为他有事关全局的重要性。例如，他必须正式访问方格 t 。由于国王不习惯于浪费自己的时间，因此他想用最小的移动步数&#xff0…

编程日记2024/05/31 02:30:00

for...in和 for...of

在对数据或者对象进行遍历时，经常使用的两种方法是 for...in和 for...of，那么这两种方法有什么区别呢？ for…in for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。语法： for (variable in object) {// statem…

编程日记2024/05/31 02:20:00

J2EE复习(二)XML

2019独角兽企业重金招聘Python工程师标准>>> XML（eXtensible Markup Language）简介XML 可扩展标记语言XML是一种您可以用来创建自己的标记的标记语言。XML由万维网协会（W3C）创建 XML和Html比较比较内容 …

编程日记2024/05/31 02:10:00

Angular 路由

Angular 路由简单路由配置每个带路由的 Angular 应用都有一个Router（路由器）服务的单例对象。当浏览器的 URL 变化时，路由器会查找对应的 Route（路由），并据此决定该显示哪个组件。路由器需要先配置才…

编程日记2024/05/31 02:00:00

leecode第二十题（有效的括号）

class Solution { public:bool isValid(string s) {int start0,ends.size()-1;if(end-1)//万万没想到，他把空字符串当成true了return true;int ss[end1];//歪方法，把左括号全部<0，右括号都>0，且同类型符号绝对值一样for(int…

编程日记2024/05/31 01:50:00

开始Hibernate介绍

1.介绍一个框架一个Java领域内的持久化框架一个ORM框架 2.持久化和数据库相关的各种操作保存更新删除查询加载：根据特定的OID，把一个对象从数据库加载到你内存中。 OID：为了在系统中找到所需的对象，需要为每一个对象分配…

编程日记2024/05/31 01:40:00

STL容器[06]

Linux文件锁学习笔记转载于:https://www.cnblogs.com/motadou/archive/2009/11/25/1610328.html

编程日记2024/05/31 01:30:00

ASP.NET 2.0在SQL Server 2005上自定义分页

这篇文章讲述了如何利用SQL Server 2005的新特性来简单高效的实现分页。对于那些暂时还没用到SQL Server2005的人们,请看在大规模数据中的高效分页方法。如果需要，这篇文章会补上这里讲到的内容。出处：http://aspnet.4guysfromrolla.com/demos/printPag…

编程日记2024/05/31 01:20:00

简单安装与使用composer

1、下载composer.exe工具，然后进行安装这一步需要找到你使用的php版本文件 2、windowsr cmd 输入composer 安装中国镜像，提高使用效率 https://pkg.phpcomposer.com/ 赋值到cmd中执行即可。 1、找到自己的php环境地址并进入，如&#xf…

编程日记2024/05/31 01:10:00

[推荐]C#快速开发3d游戏工具--Unity3d

最近有幸接触了一点Unity3d的东西，和大家分享一下。 Unity3d 简介是一款可视化的，3d游戏开发软件。可以进行手动绘制3d场景，自己添加摄像机角度，3d模型设计，事件触发，对于园子里大家很感兴趣的地方在于&am…

编程日记2024/05/31 01:00:00

Angular 可观察对象(Observable)

可观察对象(Observable) 可观察对象支持在应用的发布者和订阅者之间传递消息。可观察对象是声明式的 —— 即定义的用于发布值的函数，在有消费者订阅它之前，这个函数不会实际执行。可观察对象可能会发出的三种通知： 通知类型说明next必要…

编程日记2024/05/31 00:50:00

select框高度问题

<div class"article-start-box"> <span class"categery">分类栏目</span> <select style"position: absolute;z-index: 1;margin-left: 40px;" class"choose" οnmοusedοwn"if(this.options.length>6)…

编程日记2024/05/31 00:40:00

c#技巧教程(连载)

c#技巧教程系列_1 http://www.rayfile.com/files/e03d922e-2418-11de-858a-0019d11a795f/ 转载于:https://www.cnblogs.com/manwu2008/archive/2009/04/08/1431823.html

编程日记2024/05/31 00:30:00

JavaScript 数据拷贝

JavaScript 数据类型基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。引用数据类型：对象( Object )、数组( Array ) 和方法…

编程日记2024/05/31 00:20:00

Java链表和递归

删除链表的指定元素： public class ListNode {public int val;public ListNode next;public ListNode(int x){valx;}//链表节点的构造函数//使用arr为参数，创建一个链表，当前的ListNode为链表头节点public ListNode(int arr[]){if(arrnull||a…

编程日记2024/05/31 00:10:00

设计模式笔记(9)---组合模式（结构型）

Gof定义将对象组合成树形结构以表示“部分--整体”的层次结构。Composite使得用户对单个对象和组合对象使用具有一致性。在面向对象系统中，我们经常会遇到一类具有”容器“特征的对象---即他们在充当对象的同时，又是其他对象的容器。比如在一些管理系统…

编程日记2024/05/31 00:00:00

npm install出现的错误

在使用cnpm 安装node依赖包的时候，出现上述错误，网上搜索，说是有两个解决方案： 虽然提示不适合Windows，但是问题好像是sass loader出问题的。所以只要执行下面命令即可； 方案一： cnpm rebuild n…

编程日记2024/05/30 23:50:00

射频放大器芯片3阶截点计算与芯片选择

在选用射频放大器芯片时，除了需要考虑增益、噪声指数等指标外，线性指标也是必须关注的参数。在射频或微波多载波通讯系统中，三阶交调截取点IP3（Third-order Intercept Point）是一个衡量线性度或失真的重要指标。交调失…

编程日记2024/05/30 23:40:00

Python-接口自动化（二）

python基础知识（二） （二）常用控制流 1、控制语句分支语句：起到一个分支分流的作用，类似马路上的红绿灯循环语句：for while 可以使代码不断重复的执行 2、判断语句：关键字是if..eli…

编程日记2024/05/30 23:30:00

Angular CLI在线安装和离线安装

Angular CLI 安装方式默认已经安装了 Node.js 和 npm 包管理器。 1. 在线安装可以使用外网的情况下，可以使用在线安装的方式。要使用 npm 命令全局安装 CLI，请打开终端/控制台窗口，输入如下命令： npm install -g angular/…

编程日记2024/05/30 23:20:00

近来工作和面试一些人的感受（原）

最近公司招聘，面试了很多人，有牛人 - 无所不能的，自认为没必要再提高的牛人，有硕士，有啥都不懂乱投简历的，有简历项目经验写几十个的各种技术都精通的，还有水平一般却要求薪水很高的&#xff0c…

编程日记2024/05/30 23:10:00

关于vue+webpack的一点配置

开发环境跨域访问： config/index.js 增加proxyTable里的内容，然后可以在config/dev.env.js中设置访问地址的origin为"/api" 本地图片访问问题： 一般，放在static下，图片访问地址设置成‘./static/....’ js等…

编程日记2024/05/30 23:00:00

2.5Gb/s混合集成光发射机

0、引言<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />在信息呈爆炸式发展的今天，光纤通信已成为现代信息网络的主要传输手段，近几年国家干线网大部分仍采用2.5Gb/s系统, 10Gb/s系统正积极研制开发&…

编程日记2024/05/30 22:50:00

laravel5.8的使用

首先，确定电脑已经安装了composer。最好是全局安装然后打开phpstorm的控制台： composer create-project --prefer-dist laravel/laravel blog另外一种方式步骤多。然后中间配置的地方又多，不推荐。 artisan 在Laravel根目录下运行&#xff1…

编程日记2024/05/30 22:40:00

Http服务

启用Http服务的准备工作

Http方法返回单个值

HttpClient.get()方法

HttpClient.put()方法

HttpClient.post()方法

HttpClient.delete()方法

添加和更新请求头

添加请求头

更新请求头

相关文章：