【问题标题】:Ionic 2 Promise Different data from serverIonic 2 Promise 来自服务器的不同数据
【发布时间】:2016-11-03 11:15:09
【问题描述】:

我使用 ionic 2 RC0promise服务器 获取数据,但我的问题 我得到了 一些数据,因为承诺数据。

所以我的问题是:

如何通过每个请求承诺不同的数据来解决这个问题有什么建议

我的代码:

Api.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/Rx';

@Injectable()
export class Api {
  storeData: any;

  constructor(public http: Http) {
    this.storeData = null;
  }

  getData(id) {
    if (this.storeData) {
      return Promise.resolve(this.storeData);
    }
    return new Promise(resolve => {
      this.http.get(URL+'?id='+id)
        .map(res => res.json())
        .subscribe(data => {
          this.storeData = data.products;
          resolve(this.storeData);
        });
    });
  }

}

在主页中,我已经从 api 读取数据,如下代码:

首页.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/Rx';

@Injectable()
export class Home {

  constructor() {}

  getDataFromApi() {
    let me = this;
    me.api.getData(id)
    .then(data => {
      if (data != null) {
        for (let i = 0; i < data.length; i++) {
          console.log(JSON.stringify(data));
        }
      }else {
        this.noProducts = 'There are no products matching the selection.';
      }
    });
  }

}

例子:

如果调用getDataFromApi(12); 返回的数据类似于{{name:bla bla, title: bla bla}}

然后如果用不同的id 再次调用该函数,例如:10

getDataFromApi(10); 返回一些数据,如{{name:bla bla, title: bla bla}}

通过上面的代码,我得到一个包含数据的数组,所有数据都是相同的。相同的标题、内容、缩略图和所有内容。

【问题讨论】:

    标签: angular typescript ionic-framework ionic2


    【解决方案1】:

    该问题与承诺无关。问题是,第一次调用服务时,您发出请求,然后将响应存储在 this.storeData 属性中。因此,如果您再次调用该服务,即使使用不同的参数,也会执行这些代码行:

    if (this.storeData) {
      return Promise.resolve(this.storeData);
    }
    

    并且请求不会发送到服务器。这就是为什么服务总是返回在第一个请求中获得的响应。为了避免这种情况,只需像这样更改服务:

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/observable/from';
    import 'rxjs/add/operator/toPromise' // <- I've added this import!!
    import 'rxjs/Rx';
    
    @Injectable()
    export class Api {
    
      constructor(public http: Http) {
      }
    
      getData(id) {
          return this.http.get(URL+'?id='+id)
            .map(res => res.json())
            .map(data => data.products)  // You only return the .products from the server response right?
            .toPromise(); // <- you don't need to create a new promise, use the toPromise() method instead
      }
    
    }
    

    【讨论】:

    • Home.tsgetDataFromApi()函数中出现了一个错误Property (then) does not exist on type (void);有什么建议吗?
    • 对不起,我忘了return...我已经更新了答案:)
    • 感谢您的回答,但又出现了一个错误:),Error: Cannot find module "rxjs/operator/add/toPromise"
    • 您可以尝试将导入语句更改为import 'rxjs/add/operator/toPromise'; 吗?抱歉有这么多错误,因为我不在笔记本电脑旁,所以我在 SO 文本区域编码。
    猜你喜欢
    • 2019-10-09
    • 2022-01-09
    • 1970-01-01
    • 2017-09-30
    • 1970-01-01
    • 1970-01-01
    • 2012-02-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多