Angular网络请求的封装方法
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。
这里我来说说我自己的网络请求封装，某种意义上来说，angular自己的网络请求封装的很好的，我们没有必要再来画蛇添足，但是，可能是我有那么一点点的代码洁癖吧，喜欢自己的风格样式，所以就有了这一点多余的东西。
Angular的网络请求
这里是angular自己的网络请求。
- url代表网络请求地址，
- param网络请求参数
- 网络请求配置，例如：请求头等
this.http.post(url, param, config).subscribe(
(res) => {
//...请求成功
}, (err) => {
//...请求失败
}, () => {
//...请求完成
}
);
很多时候我觉得，每一次请求都要写上subscribe里面的那些参数，很麻烦，或者说看起来觉得不喜欢，所以，我一般给自己封装一个新的服务service。同时给每一个需要做网络请求的组件component实现一个新的接口interface，这里面有很多都是源自java语言的设计思想。
一个网络接口
这里创建一个网络接口，来完成网络请求的回调。
export interface OnHttpImp {
onResult(result: HttpResult, code"htmlcode">
public post(url: string, param: FormData, callback: OnHttpImp, code"color: #ff0000">调用的组件
先看代码：
export class LoginComponent implements OnInit, OnHttpImp {
public validateForm: FormGroup;
public username_control: AbstractControl;
public password_control: AbstractControl;
constructor(private fb: FormBuilder,
private http: HttpUtil) {
}
ngOnInit() {
this.validateForm = this.fb.group({
'userName': [null, [Validators.required]],
'password': [null, [Validators.required]],
remember: [true],
});
this.username_control = this.validateForm.controls['userName'];
this.password_control = this.validateForm.controls['password'];
}
_submitForm() {
const params = new FormData();
const md5 = new Md5();
const password = md5.appendStr(this.password_control.value).end();
params.set('username', this.username_control.value);
params.set('password', password.toString());
this.http.post('/user/login', params, this);
}
onResult(result: HttpResult, code"color: #ff0000">进一步的封装方式
- 可以把上述里面component里面调用网络请求时传入的this，用一个统一的类MCallback来替代，统一处理返回的数据。
- 可以把所有的网络请求统一放到一个服务里面，通过调用方法名来请求，这样可以实现多次网络请求的耦合，但是个人觉得有点过度封装了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：Vue页面骨架屏的实现方法
下一篇：vue input输入框模糊查询的示例代码