Angular ネットワークリクエストをカプセル化する方法

今回は、Angular ネットワーク リクエストをカプセル化する方法と、Angular ネットワーク リクエストをカプセル化する際の 注意事項 について説明します。実際のケースを見てみましょう。

ここでは、私自身のネットワーク リクエストのカプセル化について説明します。ある意味、Angular 独自のネットワーク リクエストのカプセル化は非常に優れています。ただし、私には少しコードにこだわりがあるかもしれません。 , 私は自分のスタイルが好きなので、この余分なものを持っています。

Angularのネットワークリクエスト

ここにAngular独自のネットワークリクエストがあります。

1. url はネットワークリクエストアドレスを表し、

2. param network

   リクエストパラメータ

3. ネットワークリクエスト設定を表します。例: request first class

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

何度も、すべてのリクエストを記述する必要があると感じます内部のパラメータは非常に面倒というか気に入らないので、通常は自分用に新しいサービスをカプセル化します。同時に、ネットワーク リクエストを行う必要があるコンポーネントごとに新しい

インターフェイス が実装されます。これらの多くは 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 という 3 つのメソッドを作成します。OnComplete と onError は実装する必要はありませんが、onResult は実装する必要があります。ここの 3 つの関数は、http の 3 つのコールバックを完了するために使用されます。

その後、上記のネットワーク リクエストを新しいサービス 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 とパラメータを説明する必要はありません。コールバックは OnHttpImp のインスタンスとその関数です。ネットワークに接続することです。リクエストによって返されたデータは、対応するコンポーネントにコールバックされるため、データ処理とネットワーク リクエストを互いに分離できます。 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)
  
 }
}

上記の http リクエストによって送信される OnHttpImp オブジェクトはこれです。これは、LoginComponnt コンポーネントが OnHttpImp インターフェイスを実装し、次に関数 onResult を実装する必要があることを意味します。 、onError、onComplete

このようにして、http リクエストとデータ処理を分離することができ、コードの可読性と単純さが大幅に向上します。

さらなるカプセル化メソッド

1. 上記のコンポーネントでネットワークリクエストを呼び出すときに渡されるこれを統一クラスMCallbackに置き換えて、返されたデータを均一に処理することができます。

2. すべてのネットワーク リクエストを 1 つのサービスにまとめ、メソッド名を呼び出すことでリクエストを行うことができます。これにより、複数のネットワーク リクエストの結合を実現できますが、個人的には少しカプセル化されすぎていると思います。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

nodejs Expressを使用して自己署名httpsサーバーを構成する方法

mpvueで小さなプログラムを構築する方法

以上がAngular ネットワークリクエストをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。