详解封装基础的angular4的request请求方法
更新时间：2018年06月05日 14:59:37 作者：番茄酱
这篇文章主要介绍了详解封装基础的angular4的request请求方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为什么要封装呢？
angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，个人认为这用来写请求是非常方便的。
一个项目里会有非常多的不同的请求，但是其实每个请求都会有些共性。比如：每个请求都要传Authorization，比如每个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，比如对于错误信息的处理都是一样的......等等。
所以我们需要封装出一个请求，去统一处理这些问题，从而保证组件里调用请求方法的时候收到的值都是可以直接拿来用的，几乎不用再写些重复的代码。
希望封装成什么样呢？
当然是越少重复的代码越好，我们就是想偷懒！！！!
怎么实现呢？
首先先新建一个请求的service，文件名为：request.service.ts。然后跟着我来虚拟需求，一步一步的慢慢来完善这个service。
需求A
1.请求方式为get。
2.默认的请求超时时间为3秒，可传入别的超时时间。
3.后台返回的成功的json为这样：
{
"status": 200,
"data" : ...
}
错误时这样：
{
"status": 201,
"msg" : "用户名或密码错误"
}
实现A
request.service.ts
/**
********************************************************************************************
* @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';
@Injectable()
export class RequestService {
private setTimeout = 3000; // 默认的超时时间
constructor(private http:HttpClient) {
}
/** 获取数据
* 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 thisTime = time; // 用到的超时时间
return this.http.get(thiUrl)
.timeout(thisTime)
.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; // 返回最终值
}
}
需求B
1.为了安全，后台要求请求的头需要加上Authorization参数。
2.当请求失败（如404，500这种）时，处理好错误信息，最后的错误信息要像 实现A 里一样，是可以直接用的字符串类型的错误信息。
实现B
request.service.ts （只展示新增的代码，完整代码后面有）
import 'rxjs/add/operator/catch';
@Injectable()
export class RequestService {
/** 添加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: err any 必填,需要处理的错误信息
* return: res string 处理后的结果
**/
public httpErrorFun(err:any):string { /* new */
let res:string = ''; // 处理后的结果 /* new */
let data:any = err; // 需要处理的值 /* new */
/** 后台有返回错误信息时 */
if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) { /* new */
res = data.message; /* new */
/** 后台没有返回错误信息只有错误名时 */
} else if (data.hasOwnProperty('name')) { /* new */
let errName = data.name; /* new */
/** 请求超时 */
if (errName == 'TimeoutError') { /* new */
res = '对不起，请求超时了'; /* new */
}
/** 后台返回未授权时 */
} else if (data == "Unauthorization") { /* new */
res = '您没有权限，请重新登录' /* new */
} else {
res = "哎呀，不知道是啥错误~~"; /* new */
}
return Observable.throw(res); /* new */
}
}
完整的request service 代码
request.service.ts
/**
********************************************************************************************
* @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();
}
}
页面的显示自己去完成吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Angular.js中上传指令ng-upload的基本使用教程
这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
Material(包括Material Icon)在Angular2中的使用详解
这篇文章主要介绍了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以参考下2018-02-02
本文介绍了AngularJS 多指令Scope问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章给大家介绍了angularjs中controller的三种写法，每种写法都给出了示例代码，对大家理解和学习很有帮助，有需要的朋友们可以参考借鉴。2016-09-09
本篇文章主要介绍了Angular实现图片裁剪工具ngImgCrop实践，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了AngularJS ui-router刷新子页面路由的方法，网上虽然有很多种方法，但是都不适合小编，今天小编给大家分享一个还不错的方法，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Angularjs 基础入门的一些知识,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了AngularJS中的拦截器实例详解的相关资料,需要的朋友可以参考下2017-04-04
AngularJS基础 ng-mouseover 指令简单示例
本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下2016-08-08
本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论