关于Angular使用http发送请求后的响应处理

源代码：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';const ENDPOINT = "http://localhost:3000/echo?data=";@Component({selector: 'jerryform',template: `<input type="text" [formControl]="favoriteColorControl">`
})
export class ReactFormComponent implements OnInit  {constructor(private http:HttpClient){}ngOnInit(): void {this.favoriteColorControl.valueChanges.subscribe((value) =>{console.log('new value: ' + value);this.http.get('http://localhost:3000/angular/' + value).subscribe((response)=>console.log('response from http: ' + response),(error)=>console.log('error: ' + error));})}favoriteColorControl = new FormControl('');
}

nodejs实现的后台API代码：

  app.route('/angular/*').get(function(req, res){var sResponse = 'Hello World';var oResponse = {"success:":"ok"};setTimeout( ()=>res.send(sResponse), 1000);});

测试发现，这个HTTP请求在Chrome开发者工具里标注为成功：

然后我Angular代码里触发的是error handler，而不是期望中的success handler：

从错误明细能看出，Angular期望API返回的response是json结构：Unexpected token H in JSON at position 0

观察HTTP请求头部字段里的Accept：application/json：

返回一个json格式的response即可：

更多Jerry的原创文章，尽在：“汪子熙”:

关于Angular使用http发送请求后的响应处理相关推荐

JMeter处理jdbc请求后的响应结果
JMeter如果进行JDBC请求,请求后的响应结果如何给下一个请求用(也就是传说中的关联),于是研究了一下,下面将学习的成果做个记录: 1.添加 "JDBC Connection Confi ...
jmeter mysql查询结果提取_jmeter(11)-jdbc请求及请求后的响应结果如何提取
参考博文: https://www.cnblogs.com/wuzm/p/10862904.html https://www.cnblogs.com/qmfsun/p/5912532.html 一.环 ...
HTTP发送请求和接收响应的整个流程
HTTP 无状态性 HTTP 协议是无状态的(stateless).也就是说,同一个客户端第二次访问同一个服务器上的页面时,服务器无法知道这个客户端曾经访问过,服务器也无法分辨不同的客户端.HTTP ...
【Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解
通过学习 HttpClient 的工作机制 ,我们知道对于HTTP请求,HttpClient 实际上是构建了一个链式的处理流程: 在HttpBackend的处理流程中请求被发出.在HttpBacken ...
Jmeter HTTP请求后响应数据显示乱码解决方法
Jmeter请求后结果树里无论是text还是html响应数据显示乱码,这是因为jmeter 编码格式配置文件默认不开启导致的,解决方法如下: 1)进入jmeter-***\bin目录下,找到jmete ...
python调用接口测试_Python接口测试实战2 - 使用Python发送请求
本节内容 requests安装 requests使用 JSON类型解析 requests库详解带安全认证的请求序言上节课我们学习了接口测试的理论,抓包工具及使用Postman手工测试各种接口,这 ...
python接口测试第二期_Python接口测试实战2 - 使用Python发送请求
课程目录本节内容 requests安装 requests使用 JSON类型解析 requests库详解带安全认证的请求序言上节课我们学习了接口测试的理论,抓包工具及使用Postman手工测试各 ...
chrome 发送请求出现：Provisional headers are shown 提示
一般来说,如果看到provisional headers are shown这个提示,说明这个请求并没有发送出去. 具体原因有多种总结如下: 1.请求被某些扩展如 Adblock 拦截了,请求被浏览器 ...
Vue安装并使用axios发送请求
前言本文主要介绍的是使用在Vue项目中安装并使用axios发送请求 axios介绍 axios是一种Web数据交互方式它是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 ...

关于Angular使用http发送请求后的响应处理

关于Angular使用http发送请求后的响应处理相关推荐

最新文章

热门文章