이번에는 Angular 네트워크 요청을 캡슐화하는 방법과 Angular 네트워크 요청을 캡슐화할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.
여기서는 내 자신의 네트워크 요청 캡슐화에 대해 이야기하겠습니다. 어떤 의미에서는 추가 세부 사항을 추가할 필요가 없습니다. 그러나 약간의 코드 집착이 있을 수 있습니다. 나는 내 자신의 스타일을 좋아해서 이 여분의 것을 가지고 있습니다.
Angular의 네트워크 요청
Angular의 자체 네트워크 요청은 다음과 같습니다.
url은 네트워크 요청 주소를 나타냅니다.
param network요청 매개변수
네트워크 요청 구성, 예: request first class
this.http.post(url, param, config).subscribe( (res) => { //...请求成功 }, (err) => { //...请求失败 }, () => { //...请求完成 } );
모든 요청을 작성해야 한다고 느낄 때가 많습니다. subscribe 내부의 매개변수는 매우 번거롭거나 마음에 들지 않기 때문에 보통 새로운 서비스를 직접 캡슐화합니다. 동시에 네트워크 요청이 필요한 각 구성 요소에 대해 새로운 인터페이스 인터페이스가 구현됩니다. 이들 중 대부분은 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라는 세 가지 메소드를 생성합니다. OnComplete 및 onError는 구현할 필요가 없으며 onResult는 구현해야 합니다. 여기에 있는 세 가지 함수는 http의 세 가지 콜백을 완료하는 데 사용됩니다.
그러면 위의 네트워크 요청을 새로운 서비스 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의 인스턴스이며 해당 기능입니다. 네트워크를 연결하는 것은 요청에 의해 반환된 데이터를 해당 구성요소로 콜백함으로써 데이터 처리와 네트워크 요청을 서로 분리할 수 있다는 것입니다. 코드는 구성 요소에서 여러 요청을 보낼 때 데이터를 구별하는 데 사용되는 식별자입니다.
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 요청과 데이터 처리가 분리될 수 있으며 코드의 가독성과 단순성이 크게 향상됩니다.
추가 캡슐화 방법
위 컴포넌트에서 네트워크 요청 호출 시 전달된 this를 통합 클래스 MCallback으로 대체하여 반환된 데이터를 균일하게 처리할 수 있습니다.
모든 네트워크 요청을 하나의 서비스에 넣고 메서드 이름을 호출하여 요청할 수 있습니다. 이렇게 하면 여러 네트워크 요청을 결합할 수 있지만 개인적으로 좀 과도하게 캡슐화되어 있다고 생각합니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
nodejs express를 사용하여 자체 서명된 https 서버를 구성하는 방법
위 내용은 Angular 네트워크 요청을 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!