详解封装基础的angular4的request请求方法
网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要介绍了详解封装基础的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/mon/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/mon/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.ponent.ts
/
@App: test
@author: isiico
@type: ponent
@src: ponents/list.ponent.ts
@descriptions:
list组件
/
// Angular Core
import { Component, OnInit } from '@angular/core';
// Services
import { RequestService } from "../services/request.service";
@Component({
moduleId: module.id,
templateUrl: 'list.ponent.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.cabiListApi)
.subscribe(
res=>{
// 请求成功
this.cabis = [];
this.cabis = res;
},err=>{
// 请求失败
this.cabis = [];
this.listErrMsg = err;
})
}
ngOnInit() {
this.getList();
}
}
页面的显示自己去完成吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程