Angular网络请求的封装方法

时间:2021-05-28

很多时候,我很喜欢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-ponent里面调用网络请求时传入的this,用一个统一的类MCallback来替代,统一处理返回的数据。
  • 可以把所有的网络请求统一放到一个服务里面,通过调用方法名来请求,这样可以实现多次网络请求的耦合,但是个人觉得有点过度封装了。
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章