Angular网络请求的封装方法

2024-04-02 21:01:52

很多时候，我很喜欢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来替代，统一处理返回的数据。
可以把所有的网络请求统一放到一个服务里面，通过调用方法名来请求，这样可以实现多次网络请求的耦合，但是个人觉得有点过度封装了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angular 数据请求的实现方法

使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http' 然后在当前模块中的 imports 内进行注册 imports: [ HttpModule, JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp }
AngularJS实现ajax请求的方法

本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &
angular 用拦截器统一处理http请求和响应的方法

想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: angular.module('app.factorys',[]) .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterc
AngularJS出现$http异步后台无法获取请求参数问题的解决方法

本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht
angular2中Http请求原理与用法详解

本文实例讲述了angular2中Http请求原理与用法.分享给大家供大家参考,具体如下: 提供HTTP服务 HttpModule并不是Angular的核心模块. 它是Angular用来进行Web访问的一种可选方式,并位于一个名叫@angular/http的独立附属模块中. 编辑app.module.ts import { HttpModule, JsonpModule } from '@angular/http'; @NgModule({ imports: [ HttpModule, Jsonp
Angular的$http的ajax的请求操作（推荐）

angular通过封装$http方法,封装了,ajax请求也通过$http封装了$http.get()和$http.post()的方法,这里由于图省事,这两种方法不如直接使用通用的方法这里先写一个案例,首先先写一个对象 var req = { method: 'POST',//请求的方式 url: ip,//请求的地址 headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept'
angularJS 发起$http.post和$http.get请求的实现方法

AngularJS发起$http.post请求代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data. 解决方案: 配置$httpProvider: var myApp = angular.module('app',
Angular网络请求的封装方法

很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的. 这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西. Angular的网络请求这里是angular自己的网络请求. url代表网络请求地址, param网络请求参数网络请求配置,例如:请求
react使用axios进行api网络请求的封装方法详解

目录前言准备工作开始封装axios config.js request.js 进行请求总结前言最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴准备工作进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件如果没有,请先安装axios npm install axios 开始封装axios 首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request
微信小程序之网络请求简单封装实例详解

微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request
Android Xutils3网络请求的封装详解及实例代码

Xutils3网络请求的封装详解封装了一个Xutil3的网络请求工具类,分享给大家,本人水平有限,不足之处欢迎指出. 使用前先配置xutils3: 1.gradle中添加 compile 'org.xutils:xutils:3.3.40' 2.自定义Application /** * Created by Joe on 2016/9/25. */ public class MyApp extends Application { @Override public void onCreate(
详解微信小程序网络请求接口封装实例

网络请求封装实例实现定制要求和方便调用,对微信小程序的网络请求接口进行了封装封装位置:app.js,方便全局调用实现方法调用,只用关注接口url和入参默认和自定义的请求成功.失败和完成的回调处理可设置请求失败自动重新请求的次数可以防止重复提交每个请求设定requestCode 代码直接将这个方法放在了app.js中 /** * 接口公共访问方法 * @param {Object} urlPath 访问路径 * @param {Object} params 访问参数(json格式)
Flutter 网络请求框架封装详解

Flutter 请求网络的三种方式 flutter 请求网络的方式有三种,分别是 Dart 原生的网络请求 HttpClient.第三方网络请求 http以及 Flutter 中的 Dio.我们可以比较一下这三种网络请求方式,然后封装为我们方便请求网络的工具类. Dart 原生的网络请求 HttpClient 实现 Dart 获取网络数据的请求,一般我们需要以下几个步骤: step 1: 原生的网络请求时不需要修改 pubspec.yaml 文件的,我们只需要在使用的地方引入所需包就可以了 i
微信小程序网络请求模块封装的具体实现

目录前言具体实现 1.确定结构 2.service网络请求的基本配置和公共方法 3.apis创建对应功能模块的网络请求方法 4.使用总结前言在进行一个微信小程序项目开发的时候我需要网络请求模块和后端数据进行沟通: 接下来就和我一起简单的封装的一下网络请求模块吧. 具体实现 1. 确定结构在根目录新建 service和apis文件夹: service用来做网络请求的基本配置和输出公共的网络请求方法: apis用来创建对应功能模块的网络请求方法(ex:操作音乐.操作视频): 2. ser
iOS判断网络请求超时的方法

本文介绍了iOS判断网络请求超时的方法,代码具体如下: + (AFHTTPRequestOperation *)requestOperationWithUrl:(NSString *)url requetMethod:(NSString *)method paramData:(NSDictionary *)aParamData constructingBodyWithBlock:(void (^)(id <AFMultipartFormData> formData))block success
微信小程序网络请求的封装与填坑之路

以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装. 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题示例代码: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.lo
关于ajax网络请求的封装实例

实例代码: // 封装的ajax网络请求函数 // obj 是一个对象 function AJAX(obj){ //跨域请求 if (obj.dataType == "jsonp") { //在这里 callback 必须是全局变量保证函数消失的时候这个变量不可以被销毁 //处理一下函数名(防止多个网络请求函数名字相同出现紊乱的情况) var hehe = "callBack" + "_" + new Date().getTime() +

Angular网络请求的封装方法

相关推荐

随机推荐