source

'void' 유형은 'Observable' 유형에 할당할 수 없습니다.입력 <{}>

nicesource 2023. 8. 2. 09:13
반응형

'void' 유형은 'Observable' 유형에 할당할 수 없습니다.입력 <{}>

TS 2.2.2로 마이그레이션한 후 이 오류가 발생하기 시작했기 때문에 문제가 있는 것 같습니다.코드가 작동을 멈추지 않았지만, 이제 저는 그 오류를 받았고 빈 관측치를 반환하거나, 다시 던져진 예외를 포착하거나, 물체를 반환하는 등 몇 가지 시도를 했지만, 아무 것도 작동하지 않는 것 같았습니다.왜 지금 이런 일이 일어나는 거지?내가 예외를 재투입하는 것을 이해하고 반환을 기대하지 않아야 하는 것 아닌가요?제가 오류를 잘못 읽고 있나요?

다음은 전체 오류 설명입니다.

enter image description here

완전한 코드는 다음과 같습니다.

return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // todo: log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        Observable.throw(error.statusText);
    });

관찰할 수 있는 것을 반환하려고 했지만 래퍼 메서드에서 유형이 반환될 것으로 예상합니다.T그것은 나의 역직렬화된 요청의 반환입니다.map(...)) 만약 내가 반품한다면,throw다음과 같은 오류가 발생합니다.

[ts] '관찰 가능' 유형은 'T' 유형에 할당할 수 없습니다.

사용 중:

  • 앵귤러 4
  • 유형 스크립트 2.2.2

Observable을 반환해야 합니다.

 return request
    .map((res: Response) => res.json())
    .catch((error: any) => {
        // todo: log?

        if (error.status == 500) {
            this.alertService.showError(error.statusText);
        } else if (error.status == 588) {
            this.alertService.showAlert(error.statusText);
        }

        return Observable.throw(error.statusText);
    });

가끔 아래와 같은 화살표 기능을 사용하지 않고 캐치를 호출할 때

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(this.handleError);
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

그리고 나서 그것은 오류를 줍니다.

오류 유형 오류: 정의되지 않은 속성 '탐색'을 읽을 수 없습니다. 이 속성을 얻지 못했습니다.

handleError 함수에서 이 개체에 액세스할 수 없기 때문입니다.이 .vmdk를 콘솔로 연결하면 정의되지 않습니다.따라서 이 개체가 작동하지 않고 라우터를 사용 가능한 모든 메서드를 가져오지 않습니다.

그래서 당신은 아래와 같이 여기에 화살표 기능을 사용해야 합니다.

getUserList() {
    return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
    .catch(error => { 
      return this.handleError(error);
    });
}

handleError(error: Response) {
    if (error.status == 500) {      
      this.router.navigate(['/login']);
    } else {
      return Observable.throw(error);
    }
}

또한 핸들러 오류 함수에 대한 반환을 언급하지 않은 경우 다음과 같은 오류가 다시 발생합니다.

'(오류: 임의) => void' 유형의 인수를 유형의 매개 변수에 할당할 수 없습니다.

따라서 handlerError 함수에 대해 return을 입력해야 합니다.

자세한 내용은 여기를 확인하십시오.그는 모든 가능한 오류와 해결책을 가지고 코드를 매우 잘 설명했습니다.나를 위해 일했습니다.

이것은 RXJS 6이 있는 각도 6에 대한 답입니다.당신의 요청 기능에서, 이것은 이것과 비슷하게 보일 것입니다.참고:catch로 대체되었습니다.catchError그리고.Observable.throw지금은throwError또한 RXJS 6에서는 파이프를 사용하여 이전에 도트 체인 대신 수행하고자 하는 일련의 기능을 결합합니다.

//In your service

getData(url: string): Observable<any> {
    let options = this.getHTTPOptions();
    return this.http.get<any>(url, options).pipe(
          catchError( (err: any, caught: Observable<any>) => { return 
        throwError(this.generalErrorHandler(err, caught)) } ) );
}

그러면 오류 처리기를 사용할 수 있습니다.핵심은 키워드를 지정하는 것입니다.return둘 다catchError위의 함수를 사용하여 핸들러의 오류를 반환합니다.화살표(=>할 수 . 는 다음과 같은 할 수 있음을 합니다. 이는 다음과 같은 멋진 작업을 수행할 수 있음을 의미합니다.this.router.navigate(['someroute']); (를 가져온 경우)

//In your service

  generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
    console.log('error caught: ', error);
    if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
      console.log('token has expired');
      this.logout();
      return error;
    }
    return error;
  }

이 작업을 수행하기 위한 몇 가지 주요 가져오기:

//Imports for the service

import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Http, Response } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError, of} from 'rxjs';

마지막으로 데이터를 얻기 위한 요청을 구독합니다.

//In your component, don't forget to import your service

let response$ = this.someService.getData('url here');
response$.subscribe( 
    data => { console.log('do stuff to data here', data); },
    err => { console.log("couldn't get data, maybe show error to user"); },
    () => { console.log('function that is called upon finish'); }
);
 return Observable.throw(error);

관찰 가능한 것.스로우는 더 이상 사용하지 않습니다. throwError 연산자를 인터셉트에서 사용합니다.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
   return next.handle(request).pipe(
    catchError(err => {
      if (err.status === 401) {
       // remove Bearer token and redirect to login page
        this.router.navigate(['/auth/login']);
      }
      return throwError( err );
    }));
}

Angular 14를 시킬 수 있습니다.Error(err.error.message);그리고 나는 이슈가 사라졌습니다.

예:

 handleError(err: any): Observable<any> 
{return new Error(err.error.message);}

언급URL : https://stackoverflow.com/questions/43115390/type-void-is-not-assignable-to-type-observableinput

반응형