Comment encapsuler les requêtes réseau angulaires

Cette fois, je vais vous montrer comment encapsuler les requêtes réseau Angular et quelles sont les précautions lors de l'encapsulation des requêtes réseau Angular. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Ici, je vais parler de ma propre encapsulation de demande réseau. Dans un sens, la propre encapsulation de demande réseau d'Angular est très bonne. Nous n'avons pas besoin d'ajouter de détails superflus. J'ai un peu de mal. Je suis un maniaque du code et j'aime mon propre style, donc j'ai ce truc en plus.

Demande de réseau d'Angular

Voici les propres requêtes de réseau d'Angular.

1. url représente l'adresse de la requête réseau,

2. param networkParamètre de requête

3. Configuration de la demande réseau, par exemple : demande de première classe

 this.http.post(url, param, config).subscribe(
   (res) => {
    //...请求成功
   }, (err) => {
    //...请求失败
   }, () => {
    //...请求完成
   }
  );

Souvent, je pense qu'il est très difficile d'écrire les paramètres dans l'abonnement pour chaque demande, ou il semble que Je n'aime pas ça, alors j'encapsule généralement un nouveau service pour moi-même. Dans le même temps, une nouvelle interface est implémentée pour chaque composant devant effectuer des requêtes réseau. Beaucoup d'entre elles sont des idées de conception dérivées du langage Java.

Une interface réseau

Créez ici une interface réseau pour compléter le rappel des requêtes réseau.

export interface OnHttpImp {
 onResult(result: HttpResult, code?: number): void;
 onError?(err：any): void;
 onComplete?(): void;
}
export class HttpResult {
 code?: number;
 data?: any;
 msg?: string;
}

L'interface OnHttpImp crée trois méthodes, à savoir onResult, onError et onComplete. OnComplete et onError sont facultatifs et onResult doit être implémenté. Les trois fonctions ici sont utilisées pour compléter les trois rappels de http.

Ensuite, la requête réseau ci-dessus peut être déplacée vers le nouveau service CommonService, et elle deviendra comme ceci :

 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();
    }
   }
  );
 }

Il n'est pas nécessaire d'expliquer l'url et le paramètre ici, rappel Il s'agit d'une instance de OnHttpImp. Sa fonction est de rappeler les données renvoyées par la requête réseau au composant correspondant, afin que le traitement des données et les requêtes réseau puissent être séparés. le code est un identifiant utilisé pour distinguer les données lors de l'envoi de plusieurs requêtes dans un composant.

HttpResult est une classe qui renvoie les données des requêtes réseau. Elle est utilisée pour faciliter le traitement des données et peut être personnalisée et encapsulée de manière appropriée en fonction de votre propre type de retour de données.

Le composant appelé

Regardez d'abord le code :

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)
  
 }
}

L'objet OnHttpImp transmis par le http ci-dessus request est this , cela signifie que le composant LoginComponnt doit implémenter l'interface OnHttpImp, puis implémenter les fonctions onResult, onError et onComplete.

De cette façon, la requête http et le traitement des données peuvent être séparés, ce qui rend le code lisible et concis. Le sexe a été grandement amélioré.

Autre méthode d'encapsulation

1. Vous pouvez utiliser celle qui est transmise lors de l'appel de la requête réseau dans le composant ci-dessus . Une classe unifiée MCallback est utilisée à la place pour traiter uniformément les données renvoyées.

2. Vous pouvez regrouper toutes les requêtes réseau dans un seul service et les demander en appelant le nom de la méthode. Cela peut réaliser le couplage de plusieurs requêtes réseau, mais je pense personnellement que c'est un peu excessif. encapsulé.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser nodejs express pour configurer un serveur https auto-signé

Comment créer un petit programme avec mpvue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!