Ionic 2：存储来自 http GET 请求的响应

Question

我正在开发一个应用程序并设置了一个事件提供程序。我正在使用 Eventbrite API 来获取一个城市中发生的事件池。我在试图弄清楚如何执行获取请求并将其存储在变量中时遇到了困难。这是请求的 URL：

https://www.eventbriteapi.com/v3/events/search/?location.address=Atlanta&expand=organizer,venue&token={MY_TOKEN}

到目前为止，这是我的提供者：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import {NativeStorage} from "ionic-native";
import 'rxjs/add/operator/map';

/*
  Generated class for the EventProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class EventProvider {
  data:any;
  constructor(public http: Http) {
    this.data = null;
    //console.log('Hello EventProvider Provider');
  }

  public getCityEvents(city) {
    var event = {id: "", name: "", start: "", end: "", latitude: "", longitude: "", venue:""};
    NativeStorage.getItem('event')
      .then(function (data) {
        alert("data: " + JSON.stringify(data));
        alert("data id: " + data.id);

        event = {
          id = data.id,
          name = data.name,
          start = data.start,
          end = data.end,
          latitude = data.latitude,
          longitude = data.longitude,
          venue = data.venue
        };


      this.http.get("https://www.eventbriteapi.com/v3/events/search/?location.address=Atlanta&expand=organizer,venue&token=VMGQGYQUIO3IKNS75BD4").subscribe( data =>{
        console.log(data);
        },
      error => {
        console.log(error)
      });
      })
  }

}

我现在只想将此 get 请求的 JSON 响应存储在一个变量中。有人可以提供一些帮助吗？

Answer 1

在NativeStorage.getItem('event').then((data) => { ... } 中使用箭头函数，您可以在http 回调中访问实际上下文this。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import {NativeStorage} from "ionic-native";
import 'rxjs/add/operator/map';

/*
  Generated class for the EventProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class EventProvider {
  data:any;
  constructor(public http: Http) {
    this.data = null;
    //console.log('Hello EventProvider Provider');
  }

  public getCityEvents(city) {
    var event = {id: "", name: "", start: "", end: "", latitude: "", longitude: "", venue:""};
    NativeStorage.getItem('event')
      .then((data) => {
        alert("data: " + JSON.stringify(data));
        alert("data id: " + data.id);

        event = {
          id = data.id,
          name = data.name,
          start = data.start,
          end = data.end,
          latitude = data.latitude,
          longitude = data.longitude,
          venue = data.venue
        };


      this.http.get("https://www.eventbriteapi.com/v3/events/search/?location.address=Atlanta&expand=organizer,venue&token=VMGQGYQUIO3IKNS75BD4").subscribe( data =>{
        console.log(data);
        //variable assignment
        this.data = data;
      },
      error => {
        console.log(error)
      });
      })
  }

Answer 2

创建函数

  getData() {
return this.http.get("https://www.eventbriteapi.com/v3/events/search/?location.address=Atlanta&expand=organizer,venue&token=VMGQGYQUIO3IKNS75BD4")
                    .map(this.extractData)
                    .catch(this.handleError);
  }


  private extractData(res: Response) {
let body = res.json();
return body.data || { };
  }

然后订阅

  this.getData()
                     .subscribe(
                       data => console.log(data);
                       error =>  console.log(error));
  }

请参考angular docs你从邮递员那里得到的作品。