Encapsulation method of Angular network request

Many times, I like the coding style of angular very much, especially after angular supports typescript, the complete life cycle and perfect hook functions are irreplaceable by other languages.

Here I will talk about my own network request encapsulation. In a sense, angular's own network request encapsulation is very good, so we don't need to add anything to it. However, maybe I have a little bit of code obsession with it and like my own style, so I have this extra thing.

Angular's network requests

Here is angular's own network request.

1. url represents the network request address.
2. Param Network Request Parameters
3. Network request configuration, such as: request header, etc.

 (url, param, config).subscribe(
   (res) => {
    //...Request succeeded   }, (err) => {
    //...Request failed   }, () => {
    //...Request complete   }
  );

Many times I think that it is very troublesome to write the parameters in the subscribe for every request, or it seems that I don’t like it, so I usually encapsulate a new service for myself. At the same time, a new interface is implemented for each component that needs to make network requests. Many of them are designed from the Java language.

A network interface

Here a network interface is created to complete the callback of network requests.

export interface OnHttpImp {

 onResult(result: HttpResult, code?: number): void;

 onError?(err：any): void;

 onComplete?(): void;
}

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

The OnHttpImp interface creates three methods, namely onResult, onError and onComplete. Among them, onComplete and onError are not required to be implemented, and onResult must be implemented. The three functions here are used to complete the three callbacks of http.

Then, the above network request can be moved to the new service CommonService, and it will become like this:

 public post(url: string, param: FormData, callback: OnHttpImp, code?: number) {
  url =  + url;
  const headers = new Headers();
  ('Content-Type', 'application/x-www-form-urlencoded');
  (url, param, {}).subscribe(
   (res) => {
    if (code) {
     (res, code);
    } else {
     (res);
    }
   }, (err) => {
    (url + '===>' + (err));
   }, () => {
    if () {
     ();
    }
   }
  );
 }

There is no need to explain the url and param here. Callback is an instance of OnHttpImp, which is to call back the data returned by the network request to the corresponding component, so that data processing and network requests can be separated from each other. The code is an identifier used to distinguish the data isolation when multiple requests are sent in a component.

HttpResult is a class that requests data to be returned by network, which is used to facilitate processing of data. It can be customized to encapsulate according to its own data return type.

The component called

Let's look at the code first:

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() {
   = ({
   'userName': [null, []],
   'password': [null, []],
   remember: [true],
  });
  this.username_control = ['userName'];
  this.password_control = ['password'];
 }


 _submitForm() {
  const params = new FormData();
  const md5 = new Md5();
  const password = (this.password_control.value).end();
  ('username', this.username_control.value);
  ('password', ());
  ('/user/login', params, this);
 }

 onResult(result: HttpResult, code?: number): void {
  //If multiple network requests, you need to pass in code value and determine the source of the request based on the code value  //swthch(code){
  //  case 100:
  //  
  //  break;
  //}
  
  // If a single request is requested, the request result will be processed directly.  // (result)
  
 }
}

The OnHttpImp object transmitted by the http request above is this, which means that the LoginComponnt component must implement the OnHttpImp interface, and then implement the functions onResult, onError and onComplete.

In this way, the http request and data processing can be separated, and the readability and simplicity of the code are greatly improved.

Further packaging methods

1. This can be used to replace the above component that calls network requests when calling the network request with a unified class MCallback to process the returned data uniformly.
2. All network requests can be placed in one service and requested by calling the method name, which can achieve the coupling of multiple network requests, but I personally think it is a bit over-encapsulated.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.