Question

我构建了一个简单的小角度网络应用程序，用户可以输入商店编号，然后用手持扫描仪扫描UPC，它将显示项目描述图片和项目的价格。当他们输入upc时，它总是按预期运行，但是当我扫描upc号时，它有时会带回错误请求而不是好请求，因为我认为它只是快速。有谁知道如何返回最后一个可观测量？

这是我的ts文件

import { Component } from '@angular/core';
import {IroService} from './iro.service';


@Component({
  selector: 'app-iro',
  templateUrl: './iro.component.html',
  providers: [IroService],
  styleUrls: ['./iro.component.scss']
})
export class IroAppComponent {
  title = 'app';
    countrys = [
      {value: 'US', viewValue: 'US'}
  ];
  public iroDatas;
  public hidIroData = true;
  public productName;
  public productPic;
  public IroError = true;
  public status;
  public iroPrice;
  constructor(private _iroService: IroService) {

  }
    getIroData(upc: number, storeNum: number) {
    this._iroService.getIroData(upc, storeNum).subscribe(res => {
         if (res.status !== 'error') {
          this.productName = res.payload[0].productOffersWrapper.product.productName;
          this.productPic = res.payload[0].productOffersWrapper.entityAssetGroups[0].entityAssetList[0].assetUrl;
          this.hidIroData = false;
          this.IroError = true;
          this.iroPrice = res.payload[0].productOffersWrapper.offerWrappers[0].storeFronts[0].offerPricing.storefrontPricingList[0].
          currentPrice.currentValue.currencyAmount;
         }else {
             this.IroError = false;
             this.hidIroData = true;
         }
    })
  }
}

这是我的服务

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class IroService {
    private headers = new Headers({ 'content-type': 'application/json', 'Accept': 'application/json' });
    private options = new RequestOptions({headers: this.headers});
    private iroUrl = 'http://pos-oe-service.prod.poscloud-orchestration.rscte.prod.walmart.com/iro2/';

    constructor(private http: Http) { }

    getIroData(upc, storeNum) {
        return this.http.get(this.iroUrl + upc + '/' + storeNum, this.options)
        .map((res: any) => res.json().shareReplay(1))
        //.catch((error: Response) => Observable.throw(`Network Error: ${error.statusText} (${error.status})`));
        .catch((error: Response) => [{status: 'error'}]);
    }

这是我的HTML

<app-iro-header></app-iro-header>
<div class="container">
    <div id="storeNum">
    <md-input-container class="iro-full-width">
    <input type="search" (keyup.enter)="getIroData(upc.value,storeNum.value)" #storeNum mdInput placeholder="Store Number" required>
    </md-input-container>
    </div>
    <div id="upc">
        <md-input-container class="iro-full-width">
        <input type="search" (keyup.enter)="getIroData(upc.value,storeNum.value)" (input)="getIroData(upc.value,storeNum.value)" #upc mdInput placeholder="UPC" required>
        </md-input-container>
    </div>
    <br>
    <div id="country">
        <md-select placeholder="Country" name="country">
            <md-option id="countryOption" *ngFor="let country of countrys" [value]="country.value">
                {{country.viewValue}}
            </md-option>
        </md-select>
        </div>
    <div>
   <button md-raised-button color="primary" id="Search" (click)="getIroData(upc.value,storeNum.value)" type="button">Search</button> 
    </div>
    <div id="data" [hidden]="hidIroData">
      <h1 class="productName">{{productName}}</h1>
      <img class="productImage" src="{{productPic}}" height="200" width="200">
      <h1 class="priceName" color="primary"> Price  {{iroPrice | currency: 'USD':true}}</h1>
    </div>
    <div id="error" [hidden]="IroError">
        <h1 class="productError">No data for this upc at this store number</h1>
    </div>
</div>

有时这会起作用，它会按预期返回产品信息，但有时会返回该项目一秒钟，然后立即显示未找到项目的错误消息。通过查看chrome开发人员工具，我知道observable的最后一个请求很好但是我不知道如何让它等待并且总是返回最后一个observable谢谢你的帮助 enter image description here

Answer 1

我在这种情况下所做的是处理状态代码或在

中的if语句中返回一些标题

getIroData(upc: number, storeNum: number) {
    this._iroService.getIroData(upc, storeNum).subscribe(res => {
         if (res.status !== 'error') {

我会检查您可以处理的更多错误

 if (res.status !== 'error' || res.status !== 'not found' || res.httpStatusCode !== 404) {

做这样的事情

从请求

1 个答案: