집 > 기사 > 웹 프론트엔드 > Angular 네트워크 요청을 캡슐화하는 방법

Angular 네트워크 요청을 캡슐화하는 방법

php中世界最好的语言원래의: 2018-05-28 12:00:271553검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!