基于angular2 的 http服务封装的实例代码
- 作者: 小蔡43323867
- 来源: 51数据库
- 2021-08-27
最近在项目中折腾了下angular2,所以出来跟大家分享,希望有帮助,每个公司业务不一样,按实际情况而定,个人学习心得,不作为标准。
1、定义http-interceptor.service.ts服务,统一处理http请求
/**
* name:http服务
* describe:对http请求做统一处理
* author:angular那些事
* date:2017/6/3
* time:11:29
*/
import {injectable} from '@angular/core';
import {http, response} from '@angular/http';
import 'rxjs/add/operator/topromise';
@injectable()
export class httpinterceptorservice {
constructor(private http: http) {
}
/**
* 统一发送请求
* @param params
* @returns {promise<{success: boolean, msg: string}>|promise<r>}
*/
public request(params: any): any {
if (params['method'] == 'post' || params['method'] == 'post') {
return this.post(params['url'], params['data']);
}
else {
return this.get(params['url'], params['data']);
}
}
/**
* get请求
* @param url 接口地址
* @param params 参数
* @returns {promise<r>|promise<u>}
*/
public get(url: string, params: any): any {
return this.http.get(url, {search: params})
.topromise()
.then(this.handlesuccess)
.catch(res => this.handleerror(res));
}
/**
* post请求
* @param url 接口地址
* @param params 参数
* @returns {promise<r>|promise<u>}
*/
public post(url: string, params: any) {
return this.http.post(url, params)
.topromise()
.then(this.handlesuccess)
.catch(res => this.handleerror(res));
}
/**
* 处理请求成功
* @param res
* @returns {{data: (string|null|((node:any)=>any)
*/
private handlesuccess(res: response) {
let body = res["_body"];
if (body) {
return {
data: res.json().content || {},
page: res.json().page || {},
statustext: res.statustext,
status: res.status,
success: true
}
}
else {
return {
statustext: res.statustext,
status: res.status,
success: true
}
}
}
/**
* 处理请求错误
* @param error
* @returns {void|promise<string>|promise<t>|any}
*/
private handleerror(error) {
console.log(error);
let msg = '请求失败';
if (error.status == 400) {
console.log('请求参数正确');
}
if (error.status == 404) {
console.error('请检查路径是否正确');
}
if (error.status == 500) {
console.error('请求的服务器错误');
}
console.log(error);
return {success: false, msg: msg};
}
}
2、在每一个模块创建一个service,service定义此模块的所有http数据请求,我这里演示登录模块:login.service.ts
/**
* name:登录服务
* describe:请输入描述
* author:angular那些事
* date:2017/6/1
* time:00:13
*/
import {injectable} from '@angular/core';
import {httpinterceptorservice} from 'app/commons/service/http-interceptor.service'
@injectable()
export class loginservice {
constructor(private httpinterceptorservice: httpinterceptorservice) {
}
/**
* 登陆功能
* @param params
* @returns {promise<{}>}
*/
login(username: string, password: string) {
return this.httpinterceptorservice.request({
method: 'post',
url: 'http://119.232.19.182:8090/login',
data: {
loginname: username,
password: password
},
});
}
/**
* 注册
* @param user
* @returns {any}
*/
reguster(user: any) {
return this.httpinterceptorservice.request({
method: 'post',
url: 'http://119.232.19.182:8090/reguster',
data: {
user: user
},
});
}
}
3、在component注入servicelogin.service.ts。调用serivelogin.service.ts服务定义的方法,这里通过login.component.ts演示
/**
* name:登录组件
* describe:请输入描述
* author:angular那些事
* date:2017/6/1
* time:00:30
*/
import {component} from '@angular/core'
import {loginservice} from './login.service'
@component({
selector: 'login',
templateurl: './login.component.html',
providers: [loginservice],
})
export class logincomponent {
private username: string;
private password: string;
constructor(private loginservice: loginservice) {
}
/**
* 登录
*/
tologin() {
this.loginservice.login(this.username, this.password).then(result => {
console.log(result);//打印返回的数据
});
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
热点文章
Angular中响应式表单的三种更新值方法详析
7
Angularjs实现下拉框联动的示例代码
7
详解AngularJS跨页面传值(ui-router)
2
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
3
angular2路由切换改变页面title的示例代码
4
Angular2 组件间通过@Input @Output通讯示例
5
Angularjs中ng-repeat的简单实例
3
AngularJS 中ui-view传参的实例详解
4
浅谈Angular路由守卫
4
详解基于Angular4+ server render(服务端渲染)开发教程
4
