api 调用 Angular 8 ，结果未定义

Question

我有一个 angular 8 应用程序，想调用 Get api 调用。

但是我得到这个错误：

stack: "ReferenceError: result is not defined↵    at eval (eval at push../src/app/dossier/dossier-physical/dossier-physical.component.ts.DossierPhysicalComponent.ngOnInit

这是ts文件：

export class DossierPhysicalComponent implements OnInit {
  entries: Array<DossierEntry> = [];
  single: DossierEntry;
  showSingle: boolean;
  dossiersLoaded = false;

  constructor(
    private healthAPIService: HealthAPIService,
    private documentCorrespondencService: DocumentCorrespondenceService
  ) {}

  ngOnInit() {
    this.healthAPIService.getDossierEntry('physical').subscribe(result => {
      console.log(result.values);
      this.entries = result;
      this.dossiersLoaded = true;
    });
  }
}

这是服务：

 getDossierEntry( type: String = '' ): Observable<DossierEntry[]> {
    const entryType = type === '' ? 'all' : 'type/' + type;
    return this.http.get<DossierEntry[]>('/api/patient/{patientUUID}/DossierEntry/' + entryType );
  }

这是总误差

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical", ok: false, …}
error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot GET /api/patient/%7BpatientUUID%7D/DossierEntry/type/physical</pre>↵</body>↵</html>↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical"
__proto__: HttpResponseBase

那么我这里做错了什么？

谢谢

问题是我尝试重构 Get 方法。因为我有一个服务：health.api.service。

并且有自定义的 api 调用。像这样：


 get( route: string, responseType: RespType = 'json', fullResponse: boolean = false, params = null): Observable<any> {
    return this.invoke( 'GET', route, null, responseType, fullResponse, true, params);
  }

调用方法如下所示：

 invoke(
    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
    route: string,
    body?: any,
    responseType: RespType = 'json', // PDF gets translated to array buffer and the application/pdf accept header
    fullResponse: boolean  = false,
    needsAuthenticatedUser = true,
    params: HttpParams = null
  ): Observable<any> {
    const user$ = this.authService.loginStatus()
                      .pipe( take( 1 ) );

    return user$.pipe(
      map( user => {
        let parsedRoute = route;
        if ( needsAuthenticatedUser ) {
          if ( !user ) {
            throw Error( 'Tried to call api that requires login without a user profile present' );
          } else {
            parsedRoute = parsedRoute.replace('{userId}', user.profile.sub);
            parsedRoute = parsedRoute.replace('{patientUUID}', user.profile.participant);
          }
        }
        return environment.ApiOrigin + parsedRoute;
      } ),
      switchMap( url => {
        const accessToken = this.authService.getAccessToken();

        const headers = {
          'Content-Type': 'application/json',
          'Accept'      : HealthAPIService._responseTypes[ responseType ].mime
        };

        if ( !!accessToken ) {
          headers[ 'Authorization' ] = `Bearer  ${accessToken}`;
        }

        const options = {
          body        : body,
          responseType: HealthAPIService._responseTypes[ responseType ].decode as
            | 'json'
            | 'text'
            | 'arraybuffer',
          headers     : new HttpHeaders( headers )
        };
        if ( fullResponse ) {
          options[ 'observe' ] = 'response';
        }
        if (params !== null) {
          options['params'] = params;
        }

        return this.http.request( method, url, options )
                   .pipe( catchError(err => this.handleError(err)) );
      } )
    );
  }

但我想去掉那个自定义的 Get 方法。并且只想用 Angular.

的 HttpClient 模块调用它

这是错误处理：

private handleError( error: any ): Observable<any> {
    if ( error.status && error.status === 401 ) {
      console.error( 'Authorization failed, trying to login.' );
      this.authService.requestLogin();
    }
    console.dir( error );
    if ('error' in error) {
      // This is necessary to allow measurement-form-component
      // handleFormErrors to give correct feedback.
      return observableThrowError(error);
    }
    return observableThrowError( error.message || error );
  }

当我尝试时。我仍然收到此错误：

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical", ok: false, …}
error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot GET /api/patient/%7BpatientUUID%7D/DossierEntry/type/physical</pre>↵</body>↵</html>↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical"
__proto__: HttpResponseBase
constructor: ƒ HttpErrorResponse(init)
__proto__: Object

所以我现在是这样的:

 ngOnInit() {
    this.healthAPIService.getDossierEntry('physical').subscribe((result: any)=> {
       console.log(result.values);
       this.entries = result;
       this.dossiersLoaded = true;
   });
 }

还有这个：

  getDossierEntry( type: String = '' ): Observable<DossierEntry[]> {
    const entryType = type === '' ? 'all' : 'type/' + type;
    return this.http.get<DossierEntry[]>('/api/patient/{patientUUID}/DossierEntry/' + entryType );
  }

然后我会得到这个错误：

core.js:7376 ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical", ok: false, …}
error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot GET /api/patient/%7BpatientUUID%7D/DossierEntry/type/physical</pre>↵</body>↵</html>↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/patient/%7BpatientUUID%7D/DossierEntry/type/physical"
__proto__: HttpResponseBase

stack: "ReferenceError: result is not defined↵    at eval (eval at push../src/app/dossier/dossier-physical/dossier-physical.component.ts.DossierPhysicalComponent.ngOnInit (http://localhost:4200/dossier-dossier-module-ngfactory.js:18184:14), <anonymous>:1:1)↵    at DossierPhysicalComponent.push../src/app/dossier/dossier-physical/dossier-physical.component.ts.DossierPhysicalComponent.ngOnInit (http://localhost:4200/dossier-dossier-module-ngfactory.js:18184:14)↵    at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.js:37850:19)↵    at checkAndUpdateNodeInline (http://localhost:4200/vendor.js:46063:20)↵    at checkAndUpdateNode (http://localhost:4200/vendor.js:46025:16)↵    at debugCheckAndUpdateNode (http://localhost:4200/vendor.js:46659:38)↵    at debugCheckDirectivesFn (http://localhost:4200/vendor.js:46619:13)↵    at Object.updateDirectives (http://localhost:4200/dossier-dossier-module-ngfactory.js:18152:711)↵    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/vendor.js:46611:21)↵    at checkAndUpdateView (http://localhost:4200/vendor.js:46007:14)"

这是 HttpMaintenanceInterceptor：

@Injectable({
    providedIn: 'root'
  })
export class HttpMaintenanceInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService ) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.auth.getAccessToken()}`
        }
      });
      return next.handle(request);
    }
}

我现在是这样的:


getDossierEntry( patientUUID: string, type: String = '' ): Observable<DossierEntry[]> {
  const entryType = type === '' ? 'all' : 'type/' + type;

  console.log(this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType));

  return this.http.get<DossierEntry[]>('/api/patient/${patientUUID}/DossierEntry/' + entryType);
}

还有这个：

 ngOnInit() {
    this.documentCorrespondencService.getDossierEntry('physical').subscribe((result: any)=> {
       console.log(result.values);
       this.entries = result;
       this.dossiersLoaded = true;
   });
 }

我得到这个输出：

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator: MapOperator
project: ƒ (res)
thisArg: undefined
__proto__: Object
source: Observable {_isScalar: false, source: Observable, operator: FilterOperator}
_isScalar: false
__proto__: Object

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/patient/$%7BpatientUUID%7D/DossierEntry/all", ok: false, …}
error: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot GET /api/patient/$%7BpatientUUID%7D/DossierEntry/all</pre>↵</body>↵</html>↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/api/patient/$%7BpatientUUID%7D/DossierEntry/all: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/api/patient/$%7BpatientUUID%7D/DossierEntry/all"
__proto__: HttpResponseBase

即使我这样做：



getDossierEntry( patientUUID: string, type: String = '' ): Observable<DossierEntry[]> {
  patientUUID = '0d584905-fc20-4723-870a-0f0214419507';
  const entryType = type === '' ? 'all' : 'type/' + type;

  console.log(this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType ));

  console.log(patientUUID);
  return this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType );
}

努力工作

Answer 1

我看到您得到的响应是 404，这意味着 URL 未找到。

在您的代码中，

您没有替换 patientUUID 的值，您可以在 URL

中检查

return this.http.get<DossierEntry[]>('/api/patient/{patientUUID}/DossierEntry/' + entryType

Answer 2

在开发者模式下，您应该添加 proxy.conf.json 以转发到您的服务器：例如：

{
  "/api": {
    "target": "http://localhost:1337",
    "secure": false
  }
}

Answer 3

将结果类型映射到任何或

ngOnInit() {
    this.healthAPIService.getDossierEntry('physical').subscribe((result:DossierEntry[])=> {
      console.log(result.values);
      this.entries = result;
      this.dossiersLoaded = true;
    });
  }

或

  ngOnInit() {
    this.healthAPIService.getDossierEntry('physical').subscribe((result:any)=> {
       console.log(result.values);
       this.entries = result;
       this.dossiersLoaded = true;
   });
 }

Answer 4

要达到预期结果，请使用以下选项将 API url 更新为 patientUUID

选项 1：

 getDossierEntry( patientUUID: string, type: String = '' ): Observable<DossierEntry[]> {
    const entryType = type === '' ? 'all' : 'type/' + type;
    return this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType );
  }

选项 2： 在 URL

中使用 patientUUID 的其他方式

getDossierEntry( patientUUID: string, type: String = '' ): Observable<DossierEntry[]> {
        const entryType = type === '' ? 'all' : 'type/' + type;
        return this.http.get<DossierEntry[]>('/api/patient/${patientUUID}/DossierEntry/' + entryType);
  }

问题：patientUUID 值未在预期位置附加到 URL 并且未找到 404，因为它被证明是无效的

要解决此问题，请使用参数更新 API url - patientUUID 和 type 并更改为在 return 之前调试添加控制台以检查 url 如下

console.log(this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType)

api 调用 Angular 8 ，结果未定义

api call in Angular 8 , result is not defined

javascript

api

http

angular-http-interceptors

angular