Angular 8中的api调用，结果未定义 [英] api call in Angular 8 , result is not defined
本文介绍了Angular 8中的api调用，结果未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个angular 8应用程序，想调用Get api调用.
I have a angular 8 application and want to call a Get api call.
但是我得到这个错误:
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.
The problem Is that I try to refactoring the Get method. Because I have a service: health.api.service.
，并且有自定义的api调用.像这样:
and there are customised api calls. Like this:
get( route: string, responseType: RespType = 'json', fullResponse: boolean = false, params = null): Observable<any> {
return this.invoke( 'GET', route, null, responseType, fullResponse, true, params);
}
，invoke方法如下:
and the invoke method looks like this:
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模块来调用它.
But I want to get rid of that customised Get method. And just want to call it with the HttpClient module of Angular.
这是错误处理:
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 );
}
当我尝试喉咙时.我觉得这个错误:
when I try thtat. I stiil get this 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:
and this is the 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 );
}
做好工作
推荐答案
要获得预期的结果，请使用以下使用patientUUID
To achieve expected result, use below option of updating API url with 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的其他方式
Option 2: Other way of using patientUUID in URL
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，因为它实际上是无效的
Issue : patientUUID value is not getting appended to URL at intended location and getting 404 not found as it turns out to be invalid
要解决此问题，请使用参数- PatientUUID 和 type 来更新上述API网址，并调试添加控制台，然后再返回以检查以下网址
To fix this issue update API url as above with parameters - patientUUID and type and to debug add console before return to check the url as below
console.log(this.http.get<DossierEntry[]>('/api/patient/' + patientUUID + '/DossierEntry/' + entryType)
这篇关于Angular 8中的api调用，结果未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
