怎么在angularjs中使用http与后台进行交互

本篇文章给大家分享的是有关怎么在angularjs中使用http与后台进行交互，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

HttpModule引入

找到app.module.ts文件

import{NgModule,ErrorHandler}from'@angular/core';
import{BrowserModule}from'@angular/platform-browser';
import{IonicApp,IonicModule,IonicErrorHandler}from'ionic-angular';
import{MyApp}from'./app.component';


import{LoginPage}from"../pages/login/login";
/**
引入HttpClientModule模块
*/
import{HttpClientModule}from"@angular/common/http";

import{RequestServiceProvider}from"../providers/request-service/request-service";
import{StatusBar}from'@ionic-native/status-bar';
import{SplashScreen}from'@ionic-native/splash-screen';

@NgModule({
declarations:[
MyApp,

LoginPage,

],
imports:[
BrowserModule,
/**
导入模块
*/
HttpClientModule,

IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true',
backButtonText:''
})
],
bootstrap:[IonicApp],
entryComponents:[
MyApp,

LoginPage,

],
providers:[
StatusBar,
SplashScreen,
{provide:ErrorHandler,useClass:IonicErrorHandler},
RequestServiceProvider,

]
})
exportclassAppModule{}

按照自己的项目导入HttpClientModule模块即可，我导入其他组件，不用考虑。

3.创建服务

ionicgproviderRequestService

执行完成后则会出现如下文件

4.封装服务

/**
导入http相关
*/
import{HttpClient,HttpHeaders}from'@angular/common/http';
import{Injectable}from'@angular/core';
import{Observable}from"rxjs";

/*
GeneratedclassfortheRequestServiceProviderprovider.

Seehttps://angular.io/guide/dependency-injectionformoreinfoonproviders
andAngularDI.
*/
@Injectable()
exportclassRequestServiceProvider{

/**
讲基础路径提取说出来，配置ip和端口时只需要在这修改
*/
//basePath:string='http://10.4.0.205:8081'
reserveBasePath:string='http://10.6.254.110:8081'
basePath=this.reserveBasePath;
/**
封装固定的消息头相关
*/
privateheaders=newHttpHeaders({'Content-Type':'application/json'})
//privateheaders=newHttpHeaders({'Access-Control-Allow-Origin':'*'});

/**
初始化http变量
*/
constructor(publichttp:HttpClient){
console.log('HelloRequestServiceProviderProvider');
}

/**
给外界提供了四个基础的方法只需要传入uri和data即可
*/
get(req:any):Observable<any>{
returnthis.http.get(this.basePath+req.uri,{headers:this.headers});
}

post(req:any):Observable<any>{
returnthis.http.post(this.basePath+req.uri,req.data,{headers:this.headers});
}
put(req:any):Observable<any>{
returnthis.http.put(this.basePath+req.uri,req.data,{headers:this.headers});
}
delete(req:any):Observable<any>{
returnthis.http.delete(this.basePath+req.uri,{headers:this.headers});
}

}

5.导入声明封装服务

找到app.module.ts文件和第一部类似

import{NgModule,ErrorHandler}from'@angular/core';
import{BrowserModule}from'@angular/platform-browser';
import{IonicApp,IonicModule,IonicErrorHandler}from'ionic-angular';
import{MyApp}from'./app.component';


import{LoginPage}from"../pages/login/login";
/**
引入HttpClientModule模块
*/
import{HttpClientModule}from"@angular/common/http";

/**
导入自定的服务
*/
import{RequestServiceProvider}from"../providers/request-service/request-service";
import{StatusBar}from'@ionic-native/status-bar';
import{SplashScreen}from'@ionic-native/splash-screen';

@NgModule({
declarations:[
MyApp,

LoginPage,

],
imports:[
BrowserModule,
/**
导入模块
*/
HttpClientModule,

IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true',
backButtonText:''
})
],
bootstrap:[IonicApp],
entryComponents:[
MyApp,

LoginPage,

],
providers:[
StatusBar,
SplashScreen,
{provide:ErrorHandler,useClass:IonicErrorHandler},
/**
声明服务
*/
RequestServiceProvider,

]
})
exportclassAppModule{}

6.使用服务

找到自己的页面所对应的ts文件如下面代码一样

import{Component}from'@angular/core';
import{IonicPage,NavController,NavParams}from'ionic-angular';
/**
导入声明
*/
import{RequestServiceProvider}from"../../providers/request-service/request-service";

/**
*GeneratedclassfortheLoginPagepage.
*
*Seehttps://ionicframework.com/docs/components/#navigationformoreinfoon
*Ionicpagesandnavigation.
*/

@IonicPage()
@Component({
selector:'page-login',
templateUrl:'login.html',
})
exportclassLoginPage{
title:string='登录'
promptMessage:string=''

user={
username:'',
password:''
}
req={
login:{
uri:'/user/login'
}

}

constructor(publicnavCtrl:NavController,publicnavParams:NavParams,
/**
初始化服务对象
*/
privaterequestService:RequestServiceProvider){

}

ionViewDidLoad(){
console.log('ionViewDidLoadLoginPage');
}
login(){

/**
调用post方法，subscribe()方法可以出发请求，调用一次发送一次，调用多次发多次
*/
this.requestService.post({uri:this.req.login.uri,data:user}).subscribe((res:any)=>{
console.log(res);
if(res.code==0){
this.promptMessage=res.message;
}else{
this.promptMessage=res.message;
}

},
error1=>{
alert(JSON.stringify(error1))
});

}
}

以上就是怎么在angularjs中使用http与后台进行交互，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。