本文将分享angular2、ng2httpgetpost传参的详细内容，并且还将对angularget请求传参进行详尽解释，此外，我们还将为大家带来关于angular$q封装$httpget和post
本文将分享angular2、ng2 http get post 传参的详细内容，并且还将对angular get请求传参进行详尽解释，此外，我们还将为大家带来关于angular $q封装$http get和post请求、Angular 2 http.post () 没有发送请求 - Angular 2 http.post () is not sending the request、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 一、Http 请求示例（Get）、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http POST的相关知识，希望对你有所帮助。
本文目录一览：- angular2、ng2 http get post 传参（angular get请求传参）
- angular $q封装$http get和post请求
- Angular 2 http.post () 没有发送请求 - Angular 2 http.post () is not sending the request
- Angular 4.3 HttpClient (Angular访问 REST Web 服务) 一、Http 请求示例（Get）
- Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http POST
angular2、ng2 http get post 传参（angular get请求传参）
ng2 http获取服务器数据的时候传递参数详解
1、 六种方法获取服务器数据所传递的参数
get(url: string,options?: RequestOptionsArgs): Observable<Response>; post(url: string,body: string,options?: RequestOptionsArgs): Observable<Response>; put(url: string,options?: RequestOptionsArgs): Observable<Response>; delete(url: string,options?: RequestOptionsArgs): Observable<Response>; patch(url: string,options?: RequestOptionsArgs): Observable<Response>; head(url: string,options?: RequestOptionsArgs): Observable<Response>;
2、详解
this.http({
url: "data/list.json" or "data/list.PHP" or ......
method: "get",search: "name=zhangxuchao&password=heping" or 使用URLSearchParams() 对象
headers: 使用Headers()对象设置 可选
body: "" 可选
})
3、实例
import { Http,Response,URLSearchParams } from 'angular2/http';
let params = new URLSearchParams();
params.set('name','huge');
console.log(params.toString()) // name=huge
this.http.get(StaticSettings.BASE_URL,{ search: params}).subscribe(
);
this.http.post(url,params).subscribe(res=> {
console.log(res);
});
URLSearchParams说明地址：https://developer.mozilla.org...
angular $q封装$http get和post请求
//第一步，定义发送请求的配置信息
angular.module('hkApp')
.constant('API_ENDPOINT',{
host: 'http://testfx.ypcoo.com',port: 80,path: '/index.PHP/Wap',platform: 'weixin' // string 'weixin or app' 平台常量，通过此参数判断系统是在微信里面使用还是在APP里面使用，以便调用不同的微信接口
});
//第二步，定义一个服务，“专门”用来发送get或者post请求
/**
* 定义ApiService服务
* 功能：专门向服务器发送post 和 get请求
* */
angular.module('hkApp')
.factory('ApiService',["$window","$http","WAP_CONfig","$q","$log","$ionicLoading",function($window,$http,WAP_CONfig,$q,$log,$ionicLoading) {
var _api = WAP_CONfig;
var endpoint = _api.host + ':' + _api.port;
// public api
return {
//发送服务器的域名+端口，例如http://deve.sqhzg.cn:80
endpoint: endpoint,//post请求，第一个参数是URL，第二个参数是向服务器发送的参数（JSON对象），
post: function(url,data) {
url = endpoint + url;
var deferred = $q.defer();
var tempPromise;
//显示加载进度
$ionicLoading.show({
template: 'Loading...'
});
//判断用户是否传递了参数，如果有参数需要传递参数
if(data != null && data != undefined && data != ""){
tempPromise = $http.post(url,data);
}else{
tempPromise = $http.post(url);
}
tempPromise.success(function(data,header,config,status) {
deferred.resolve(data);
$ionicLoading.hide();
}).error(function(msg,code) {
deferred.reject(msg);
$log.error(msg,code);
$ionicLoading.hide();
});
return deferred.promise;
},//get请求，第一个参数是URL，第二个参数是向服务器发送的参数（JSON对象），
get: function(url,data) {
url = endpoint + url;
var deferred = $q.defer();
var tempPromise;
//显示加载进度
$ionicLoading.show({
template: 'Loading...'
});
//判断用户是否传递了参数，如果有参数需要传递参数
if(data != null && data != undefined && data != ""){
tempPromise = $http.get(url,data);
}else{
tempPromise = $http.get(url);
}
tempPromise.success(function(data,code) {
deferred.reject(msg);
$ionicLoading.hide();
$log.error(msg,code);
});
return deferred.promise;
}
};
}]);
备注：在请求前添加了$ionicLoading显示，请求返回之后，因此$ionicLoading对象。当遇到服务器压力大的时候，不会出现“白屏” 的情况，提高用户体验
//控制器注入服务，发送请求
.state('index',{
url:'/app_index',templateURL: 'ABC.html',onEnter :function(){
//因此底部的导航栏
$(".index_footer").show();
},controller:["$scope","$state",'$ionicActionSheet',"setting_user_levelService","userNameService","ApiService",function($scope,$state,$ionicActionSheet,setting_user_levelService,userNameService,ApiService){
//获取用户信息
var userInfoPromise = ApiService.post("{:U('UserInfo/getUser')}",{
"id": "{$Think.session.ADMINID}"
});
userInfoPromise.then(function(response){
if(response.status == 1){
//会员名称
$scope.typetext = response.data.typetext;
//积分
$scope.jifen = response.data.jifen;
//红包
$scope.redpacket = response.data.redpacket;
}
});
}]
})
Angular 2 http.post () 没有发送请求 - Angular 2 http.post () is not sending the request
问题：
When I make a post request the angular 2 http is not sending this request 当我发出帖子请求时，angular 2 http 没有发送此请求
this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions())
the http post is not sent to the server but if I make the request like this http post 不会发送到服务器，但如果我发出这样的请求
this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions()).subscribe(r=>{});
Is this intended and if it is can someone explain me why ? 这是有意的，如果是的话，有人可以解释我为什么吗？ Or it is a bug ? 或者它是一个错误？
解决方案：
参考： https://stackoom.com/en/question/2RvXo
Angular 4.3 HttpClient (Angular访问 REST Web 服务) 一、Http 请求示例（Get）
链接
开发工具：Visual Studio Code
在Angular 4.3中引入了新的HttpClientModule。 这个新模块可以在@ angular / common / Http包中找到，并且可以完全重新实现前一个HttpModule。新的HttpClient服务包含在HttpClientModule中，可用于启动HTTP请求并处理应用程序中的响应。
安装 4.3 项目
开始Angular 4.3项目第一步。最简单的是用Angular CLI (Angular command line interface).
- 如果系统还没有安装过Angular CLI ，先要执行下面的命令安装最新版（-g：全局安装）：
npm install -g @angular/cli@latest
如果有安装cnpm，可用cnpm，下载速度更快
cnpm install -g @angular/cli@latest
- 新建一个文件夹ng_http，用来存放项目。命令行切换到此目录，然后用VS Code打开。
cd D:\Angular\NG_App
code . - 接着，就可以使用 ng命令了开始一个新的Angular 项目了:
ng new nghttp01
如果报错，并在错误日志记录总显示
integrity checksum Failed when using sha512
npm4升级npm5，在运行 npm install 时，可能会包这样的错误，执行
npm cache clean --force
删除项目文件夹，重新执行。
ng new nghttp01
执行成功后会产生 nghttp01文件夹与项目模板，依赖性也会自动安装。 - 检查并确认 package.json 中Angular相关所有依赖版本 号 >4.3.0。
- package.json 文件做过更新后，命令行中切换到nghttp01下，执行下面命令更新
npm install
在项目中启用 HttpClient
1。为了在项目components 中使用 HttpClient 服务，第一步就是要在Angular应用中把 HttpClientModule 包含进来。首先在应用根module中导入 HttpClient module，对应文件app.module.ts。
import { browserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http';//新增行 import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ],imports: [ browserModule,HttpClientModule //新增行 ],providers: [],bootstrap: [AppComponent] })
2。上一步在根 Module 导入了HttpClientModule ，就可以在components中使用HttpClient了。使用HttpClient第一步是导入（import），还必须要注入(inject )到component class的构造函数中。如下所示：
import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http';//新增行 @Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; constructor(private http: HttpClient){//新增行，httpclient注入到构造函数中，以使HttpClient可用。 } }
3。HttpClient使用XMLHttpRequest浏览器API来执行HTTP请求。 为了执行特定类型的HTTP请求，可以使用以下与HTTP动词相对应的方法：
**get
post
put
delete
patch
head
jsonP**
使用HttpClient 请求数据
1。 简单示例：使用 GitHub’s REST API 请求用户数据。修改app.component.ts代码(完整):
import { Component,OnInit } from '@angular/core';//新增导入OnInit
import { HttpClient } from '@angular/common/http';//新增行
@Component({
selector: 'app-root',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {//新增implements OnInit
title = 'app';
results = '';
constructor(private http: HttpClient){///新增行，httpclient注入到构造函数中，以使HttpClient可用。
}
//新增ngOnInit()方法
ngOnInit(): void { this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
console.log(data);
});
}
}
2。项目启动：VS Code命令行执行。网页访问http://localhost:4200/
ng serve
Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http POST
用HttpClient发送数据
发送数据使用HttpClient post方法。
发送POST必须要有一个支持a REST API POST http请求的后台支持。
POST方法：
const req = this.http.post('http://jsonplaceholder.typicode.com/posts',{ title: 'foo',body: 'bar',userId: 1 }) .subscribe( res => { console.log(res); },err => { console.log("Error occured"); } );
关于angular2、ng2 http get post 传参和angular get请求传参的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于angular $q封装$http get和post请求、Angular 2 http.post () 没有发送请求 - Angular 2 http.post () is not sending the request、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 一、Http 请求示例（Get）、Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http POST等相关知识的信息别忘了在本站进行查找喔。
本文标签：
