Question

我是NativeScript的新手。我正在按照Coursera上的视频教程使用NativeScript创建一个Android项目，但遇到了以上这部分错误，这是我的代码的这一部分造成的：

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/";

Answer 1

正如我已经提到的，您不能执行error.error instanceof ErrorEvent，因为ErrorEvent是一个非类的接口。您可以进行error.error instanceof HttpErrorResponse。

您无法从Simulator / Emulator中访问http://localhost:3000，因为您的api是通过计算机的IP来访问的，因为它们位于同一网络中，但在技术上是不同的（模拟）设备。

Answer 2

您的代码中存在一些错误/可能存在的缺点：

@Manoj回答type mockDynamo struct { dynI dynamodbiface.DynamoDBAPI dynResponse dynamodb.PutItemOutput } func (mq mockDynamo) PutItem (in *dynamodb.PutItemInput) (*dynamodb.PutItemOutput , error) { return &dynamodv.dynResponse, nil } m1: = mockDynamo { dynResponse : dynamodb.PutItemOutput{ some mocked output } inj := myReceiver{ dyn: m1, } inj.CreateJobCommand(some mocked data for APIGateway request)时应替换为error.error instanceof ErrorEvent
您的menu.component.html使用error.error instanceof HttpErrorResponse，当您注入[src]="BaseURL + dish.image" >时应为[src]="baseURL + dish.image" >
您可能需要httpClient的本机包装器

baseURL

确保您的import { NativeScriptHttpClientModule } from '@nativescript/angular/http-client'; @NgModule({ imports: [ ... NativeScriptHttpClientModule] ... }]服务器允许来自可能不安全来源的连接。
如果您为Android构建本机脚本应用程序，请检查您的baseURL是否允许互联网连接。确保设置了以下内容：

AndroidManifest.xml

Answer 3

他的代码直接来自 Angular 文档，他对 error.error instanceof ErrorEvent 的问题是不是 ErrorEvent 是一个接口而不是一个类。请参阅最后对相关 Angular 文档的参考。

他的实际问题是，ErrorEvent 是一个 Web API，没有在 NativeScript 环境中实现。这意味着如果您在浏览器中运行您的代码，它会工作得很好。

似乎在 NativeScript 中，始终会返回 HttpErrorResponse，但如果是客户端或网络问题（通常会返回 ErrorEvent），则会设置 {{1} } 改为“0”，status 改为“未知错误”。

Angular 文档：

<块引用>

可能会发生两种类型的错误。

服务器后端可能会拒绝请求，返回带有状态代码（例如 404 或 500）的 HTTP 响应。这些是错误响应。

客户端可能会出错，例如阻止请求成功完成的网络错误或 RxJS 运算符中抛出的异常。这些错误会产生 JavaScript ErrorEvent 对象。

https://angular.io/guide/http#getting-error-details

statusText

NativeScript应用程序的“ Error-ReferenceError-ErrorEvent未定义”

3 个答案:

Angular 文档：