Angular网络请求的封装

weij 发布于2019-08-02 10:28 / 1020人阅读

摘要：的网络请求这里是自己的网络请求。是一个网络请求返回数据的类，用来方便处理数据，可以适当根据自己的数据返回类型进行自定义封装。

很多时候，我很喜欢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?: number): void;

  onError?(err：any): void;

  onComplete?(): void;
}

export class HttpResult {
  code?: number;
  data?: any;
  msg?: string;
}

OnHttpImp 接口创建三个方法，分别是onResult，onError和onComplete，其中onComplete和onError是非必需实现的，onResult是必须实现的。这里的三个函数用来完成http的三个回调。

那么，上面的网络请求就可以移到新的服务CommonService里面，就会变成这样：

 public post(url: string, param: FormData, callback: OnHttpImp, code?: number) {
    url = Config.base + url;
    const headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    this.http.post(url, param, {}).subscribe(
      (res) => {
        if (code) {
          callback.onResult(res, code);
        } else {
          callback.onResult(res);
        }
      }, (err) => {
        console.log(url + "===>" + JSON.stringify(err));
      }, () => {
        if (callback.onComplete) {
          callback.onComplete();
        }
      }
    );
  }

这里面的url和param就不用多解释了，callback就是一个OnHttpImp的实例，作用就是把网络请求返回的数据回调到对应的component里面，这样就可以是数据处理和网络请求相互分开。code是一个标识符，用来区分在一个组件里面发送多个请求时，实现数据的隔离。

HttpResult是一个网络请求返回数据的类，用来方便处理数据，可以适当根据自己的数据返回类型进行自定义封装。

调用的组件

先看代码：

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?: number): void {
    //如果多个网络请求，需要传入code值，根据code值来判断请求来源
    //swthch(code){
    //    case 100:
    //    
    //    break;
    //}
    
    // 如果单个请求，直接处理请求结果。
    // console.log(result)
    
  }

}

上面的htpp请求传输的OnHttpImp对象是this，那么就说明LoginComponnt组件必须实现OnHttpImp接口，然后实现里面的函数onResult，onError和onComplete.

这样处理，就可以将http请求和，数据处理分开了，代码的可读性和简洁性都有大大的提升。

进一步的封装方式

可以把上述里面component里面调用网络请求时传入的this，用一个统一的类MCallback来替代，统一处理返回的数据。

可以把所有的网络请求统一放到一个服务里面，通过调用方法名来请求，这样可以实现多次网络请求的耦合，但是个人觉得有点过度封装了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52372.html

Angular网络请求的封装

摘要：的网络请求这里是自己的网络请求。是一个网络请求返回数据的类，用来方便处理数据，可以适当根据自己的数据返回类型进行自定义封装。很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。这里我来说说我自己的网络请求封装，某种意义上来说，angular自己的网络请求封装的很好的，我们没有必要再来画...

YanceyOfficial 2019-08-22 17:25 评论0 收藏0
前端知识点总结——Angular

摘要：前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容，并根据我们提供的操作指令响应用户的交互。在开发时，八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。前端知识点总结——Angular 一、Angular概述基于命令行的开发方式？ ①hot reload ②编译工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 评论0 收藏0
Angular开发实践（六）：服务端渲染

摘要：在服务端渲染方面提供一套前后端同构解决方案，它就是统一平台，一项在服务端运行应用的技术。这些着陆页是纯，并且即使被禁用了也能显示。它会把客户端请求转换成服务端渲染的页面。它是服务端渲染器和你的应用之间的桥梁。 Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案，它就是 Angular Universal（统一平台），一项在服务端运行 Angul...

Eirunye 2019-08-22 15:51 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0