/** ******************************************************************************************** * @App: test * @author: isiico * @type: service * @src: services/request.service.ts * * @descriptions: * 请求的服务 * ******************************************************************************************** */ // Angular Core import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; // rxjs import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/timeout'; import 'rxjs/add/observable/throw'; import 'rxjs/add/operator/catch'; @Injectable() export class RequestService { private setTimeout:number = 3000; // 默认的超时时间 constructor(private http:HttpClient) { } /** 添加Authorization的属性 */ private addAuthorization(options:any):void { options['headers'] = { 'Authorization': '1drf5dg4d7s4w7z', }; } /** 获取数据 * param: url string 必填,请求的url * time number 可不填,请求的超时时间,如不填,默认为setTimeout * return: Observable HttpClient的get请求，请求完成后返回的值类型是any **/ public getData(url, time = this.setTimeout):Observable<any> { let thiUrl = url; // 用到的url let options = {}; // 请求的设置 let thisTime = time; // 用到的超时时间 this.addAuthorization(options); // 请求头里添加Authorization参数 return this.http.get(thiUrl, options) .timeout(thisTime) .catch(this.httpErrorFun) // 处理错误信息(必须放在timeout和map之间) .map(res => this.resFun(res)); } /** 返回数据的处理 * param: data any 必填,需要处理的数据 * return: res any 返回处理后的值 **/ private resFun(data:any):any { let thisData:any = data; // 需要处理的值 let res:any; // 最终值 // 当status为200时 if (thisData['status'] == 200) { res = thisData['data']; // 给最终值赋值 } else { // 当status不为200时 let err = thisData['msg']; // 错误信息 throw new Error(err); // 抛出错误 } return res; // 返回最终值 } /** 对请求错误信息的处理 * param: err any 必填,需要处理的错误信息 * return: res string 处理后的结果 **/ public httpErrorFun(err:any):string { let res:string = ''; // 处理后的结果 let data:any = err; // 需要处理的值 /** 后台有返回错误信息时 */ if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) { res = data.message; /** 后台没有返回错误信息只有错误名时 */ } else if (data.hasOwnProperty('name')) { let errName = data.name; /** 请求超时 */ if (errName == 'TimeoutError') { res = '对不起，请求超时了'; } /** 后台返回未授权时 */ } else if (data == "Unauthorization") { res = '您没有权限，请重新登录'; } else { res = "哎呀，不知道是啥错误~~"; } return Observable.throw(res); } }
小结
至此，我们已经完成了一个满足基本需求的，可以公共使用的请求服务，接下来我们来看怎么在组件内调用。
调用
我们有个叫list的组件，要调用get请求，请求成功显示数据，请求失败，显示错误信息。
list.component.ts
/** ******************************************************************************************** * @App: test * @author: isiico * @type: component * @src: components/list.component.ts * * @descriptions: * list组件 * ******************************************************************************************** */ // Angular Core import { Component, OnInit } from '@angular/core'; // Services import { RequestService } from "../services/request.service"; @Component({ moduleId: module.id, templateUrl: 'list.component.html' }) export class ListComponent implements OnInit { listApi = '/assets/mock-data/list.json'; // 列表的api地址 list:Array<any>; // 列表数据(类型为数组) listErrMsg: string = ''; // 列表请求的错误信息 constructor(private req: RequestService) { } /** 获取list */ getList(){ this.listErrMsg = ''; // 清空错误信息 // 发送请求 this.req.getData(this.cabinetListApi) .subscribe( res=>{ // 请求成功 this.cabinets = []; this.cabinets = res; },err=>{ // 请求失败 this.cabinets = []; this.listErrMsg = err; }) } ngOnInit() { this.getList(); } }
页面的显示自己去完成吧！