So kapseln Sie Angular-Netzwerkanforderungen

Dieses Mal zeige ich Ihnen, wie Sie Angular-Netzwerkanfragen kapseln und welche Vorsichtsmaßnahmen beim Kapseln von Angular-Netzwerkanfragen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Hier werde ich über meine eigene Netzwerkanforderungskapselung sprechen. In gewisser Weise müssen wir keine überflüssigen Details hinzufügen Ich habe ein bisschen Probleme. Ich bin ein Code-Freak und mag meinen eigenen Stil, also habe ich dieses Extra.

Angulars Netzwerkanfrage

Hier sind Angulars eigene Netzwerkanfragen.

1. URL stellt die Netzwerkanforderungsadresse dar,

2. Param-NetzwerkAnforderungsparameter

3. Netzwerkanfragekonfiguration, zum Beispiel: Anfrage erster Klasse

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

Oft habe ich das Gefühl, dass es sehr mühsam ist, die Parameter in subscribe für jede Anfrage zu schreiben, oder es erscheint mir unangenehm. Mir gefällt es, deshalb kapsele ich normalerweise einen neuen Servicedienst für mich. Gleichzeitig wird für jede Komponente, die Netzwerkanfragen stellen muss, eine neue Schnittstellenschnittstelle implementiert. Viele davon sind Designideen, die aus der Java-Sprache abgeleitet sind.

Eine Netzwerkschnittstelle

Erstellen Sie hier eine Netzwerkschnittstelle, um den Rückruf von Netzwerkanforderungen abzuschließen.

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

Die OnHttpImp-Schnittstelle erstellt drei Methoden, nämlich onResult, onError und onComplete. OnComplete und onError sind optional und onResult muss implementiert werden. Die drei Funktionen hier werden verwendet, um die drei Rückrufe von http abzuschließen.

Dann kann die obige Netzwerkanforderung in den neuen Dienst CommonService verschoben werden, und sie wird wie folgt aussehen:

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

Es ist nicht nötig, die URL und den Parameter hier zu erklären, der Rückruf ist Nur eine Instanz von OnHttpImp wird verwendet, um die von der Netzwerkanforderung zurückgegebenen Daten an die entsprechende Komponente zurückzurufen, sodass Datenverarbeitung und Netzwerkanforderungen voneinander getrennt werden können. Code ist eine Kennung, die zur Unterscheidung von Daten beim Senden mehrerer Anfragen in einer Komponente verwendet wird.

HttpResult ist eine Klasse, die Daten aus Netzwerkanforderungen zurückgibt. Sie wird zur Erleichterung der Datenverarbeitung verwendet und kann entsprechend Ihrem eigenen Datenrückgabetyp angepasst und gekapselt werden.

Die aufgerufene Komponente

Sehen Sie sich zuerst den Code an:

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

Das von der obigen http-Anfrage übertragene OnHttpImp-Objekt ist this, then Dies bedeutet, dass die LoginComponnt-Komponente die OnHttpImp-Schnittstelle und dann die Funktionen onResult, onError und onComplete implementieren muss.

Auf diese Weise können die http-Anfrage und die Datenverarbeitung getrennt werden und die Lesbarkeit und Die Einfachheit des Codes wird verbessert.

Weitere Kapselungsmethode

1. Sie können diese beim Aufruf der Netzwerkanforderung in der obigen Komponente A verwenden Stattdessen wird die einheitliche Klasse MCallback verwendet, um die zurückgegebenen Daten einheitlich zu verarbeiten.

2. Sie können alle Netzwerkanforderungen in einem Dienst zusammenfassen und sie durch Aufrufen des Methodennamens anfordern. Dadurch kann die Kopplung mehrerer Netzwerkanforderungen erreicht werden, aber ich persönlich denke, dass dies etwas übertrieben ist. gekapselt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie NodeJS Express, um einen selbstsignierten https-Server zu konfigurieren

So erstellen Sie einen kleines Programm mit mpvue

Das obige ist der detaillierte Inhalt vonSo kapseln Sie Angular-Netzwerkanforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!