今回は、Angular ネットワーク リクエストをカプセル化する方法と、Angular ネットワーク リクエストをカプセル化する際の 注意事項 について説明します。実際のケースを見てみましょう。
ここでは、私自身のネットワーク リクエストのカプセル化について説明します。ある意味、Angular 独自のネットワーク リクエストのカプセル化は非常に優れています。ただし、私には少しコードにこだわりがあるかもしれません。 , 私は自分のスタイルが好きなので、この余分なものを持っています。Angularのネットワークリクエスト
ここにAngular独自のネットワークリクエストがあります。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; }
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(); } } ); }
というコンポーネント
まずコードを見てください: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) } }
さらなるカプセル化メソッド
nodejs Expressを使用して自己署名httpsサーバーを構成する方法
以上がAngular ネットワークリクエストをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。