欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于angular2 的 http服务封装的实例代码

程序员文章站 2024-01-30 14:43:34
最近在项目中折腾了下angular2,所以出来跟大家分享,希望有帮助,每个公司业务不一样,按实际情况而定,个人学习心得,不作为标准。 1、定义http-intercept...

最近在项目中折腾了下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);//打印返回的数据
 });
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。