NativeScript应用程序的“错误-引用错误-未定义错误事件”
NativeScript应用程序的“错误-引用错误-未定义错误事件”
提问于 2019-06-13 17:22:42
我是一个新的NativeScript学习者。我按照Coursera上的一个视频教程，使用NativeScript创建了一个安卓项目，我得到了上面的错误，这是由我的这部分代码造成的：
process-httpmsg.service.ts：
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProcessHTTPMsgService {
constructor() { }
public handleError(error: HttpErrorResponse | any) {
let errMsg: string;
if (error.error instanceof ErrorEvent) {
errMsg = error.error.message;
} else {
errMsg = `${error.status} - ${error.statusText || ''} ${error.message}`;
}
return throwError(errMsg);
}
}dish.services.ts
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';
@Injectable({
providedIn: 'root'
})
export class DishService {
constructor(private http: HttpClient,
private processHTTPMsgService: ProcessHTTPMsgService) { }
getDishes(): Observable<Dish[]> {
return this.http.get<Dish[]>(baseURL + 'dishes')
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getDish(id: string): Observable<Dish> {
return this.http.get<Dish>(baseURL + 'dishes/' + id)
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getFeaturedDish(): Observable<Dish> {
return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]))
.pipe(catchError(this.processHTTPMsgService.handleError));
}
}menu.component.html
<ActionBar title="Menu" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="dishes" class="list-group" *ngIf="dishes">
<ng-template let-dish="item">
<StackLayout orientation="horizontal" class="list-group-item">
<Image row="0" col="0" rowSpan="2" height="108" width="108" [src]="BaseURL + dish.image" class="thumb p-16"></Image>
<GridLayout class="list-group-item" rows="auto *" columns="*">
<Label row="0" col="0" [text]="dish.name" class="list-group-item-heading"></Label>
<Label row="1" col="0" class="list-group-item-text" [text]="dish.description"></Label>
</GridLayout>
</StackLayout>
</ng-template>
</ListView>
<ActivityIndicator busy="true" *ngIf="!(dishes || errMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="errMess" [text]="'Error: ' + errMess"></Label>
</StackLayout>menu.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
@Component({
selector: 'app-menu',
moduleId: module.id,
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
dishes: Dish[];
errMess: string;
constructor(private dishService: DishService,
@Inject('baseURL') private baseURL) { }
ngOnInit() {
this.dishService.getDishes()
.subscribe(dishes => this.dishes = dishes,
errmess => this.errMess = <any>errmess);
}
}我不知道项目代码的其他部分需要放入，所以请让我知道。
编辑：baseURL.ts
// export const baseURL = "http://localhost:3000/";
export const baseURL = "http://192.168.1.5:3000/";回答 3
Stack Overflow用户
发布于 2019-06-16 02:29:33
正如我已经提到的，你不能做error.error instanceof ErrorEvent，因为ErrorEvent是一个接口而不是类。你可以做error.error instanceof HttpErrorResponse。
你不能从你的模拟器/仿真器中访问http://localhost:3000，你应该通过你机器的IP来访问你的应用程序接口，因为它们在同一个网络中，但在技术上不同(模拟的)设备。
Stack Overflow用户
发布于 2020-06-24 11:47:04
您的代码中有一些错误/可能的缺点：
应由error.error instanceof HttpErrorResponse替换
- ，因为@Manoj回答了
error.error instanceof ErrorEvent
当你注入baseURL时，
- 你的menu.component.html使用
[src]="BaseURL + dish.image" >它应该是[src]="baseURL + dish.image" >
- 您可能需要httpClient
的本机脚本包装程序
import { NativeScriptHttpClientModule } from '@nativescript/angular/http-client';
@NgModule({
imports: [
...
NativeScriptHttpClientModule]
...
}]- 确保您的
baseURL服务器允许来自可能不安全来源的连接。
- 如果你为Android构建原生脚本应用程序，检查你的
AndroidManifest.xml是否允许互联网连接。确保设置了以下各项：
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<application
...
android:usesCleartextTraffic="true">Stack Overflow用户
发布于 2021-02-07 05:55:20
他的代码直接来自Angular文档，他对error.error instanceof ErrorEvent的问题是而不是，ErrorEvent是一个接口而不是类。请参考末尾的相关Angular文档。
他的实际问题是，ErrorEvent是一个Web API，而不是在NativeScript环境中实现的。这意味着如果你在浏览器中运行你的代码，它会工作的很好。
似乎在NativeScript中，总是会返回HttpErrorResponse，但如果是客户端或网络问题(通常会返回ErrorEvent )，它会将status设置为"0"，并将statusText设置为"Unknown Error“。
Angular文档：
可能会发生两种类型的错误。
服务器后端可能会拒绝该请求，返回一个状态代码为404或500的HTTP响应。这些是错误响应。
客户端可能会出错，比如阻止请求成功完成的网络错误，或者RxJS操作符中抛出的异常。这些错误会生成JavaScript ErrorEvent对象。
https://angular.io/guide/http#getting-error-details
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong.
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// Return an observable with a user-facing error message.
return throwError(
'Something bad happened; please try again later.');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56577315
复制相关文章
相似问题
腾讯云开发者
