Question

我目前正在使用Ruby on Rails作为后端处理Ionic 2。我面临的问题是我无法理解Observables和Promises。它们是否相互关联？现在，我在尝试使用标头验证POST请求后尝试检索数据。

//clocks.ts (Provider)

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';

@Injectable()
export class Clocks {

  baseUrl: string = "http://localhost:3000/api/v1"
  token: any;

  constructor(public http: Http, public storage: Storage) {}

  getAttendanceInfo() {
    return new Promise((resolve,reject) => {

      // Load token
      this.storage.get('token').then((value) => {
        this.token = value;

        let headers = new Headers();
        headers.append('Authorization', 'Token ' + this.token);
        this.http.get(this.baseUrl + '/attendances.json', {headers: headers})
          .subscribe(res => {
            resolve(res);
          }, (err) => {
            reject(err);
          })
        });
      });
  }

出席页面

//attendance.ts (Page)

loadAttendance() {
  this.clocks.getAttendanceInfo().then(res => {
    let response = (<Response>res).json();
    this.attendance = response.data;
    console.log(this.attendance)
  })
}

以下是我的问题。

在这种情况下我可以使用Observable来获得与getAttendanceInfo（）方法相同的结果吗？他们是如何运作的？
而且，有没有办法可以从存储中为每个页面请求检索令牌而无需重写相同的标题代码？例如。一种方法总是可以用来从存储中检索令牌并附加在标题处。

非常感谢你们能解决我的困惑。

Answer 1

我找到了解决方案。

您可以将身份验证创建为服务提供商的一部分。在这种情况下，我使用localStorage。对于备注，令牌的结构也取决于您的后端。对于我的情况，我使用Rails方法中的authentication_with_http_token，结构是这样的

GET /attendances HTTP/1.1
Host: localhost:3000
Authorization: Token token=123123123

我们必须匹配。

// ../providers/auth.ts

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

@Injectable()
export class Auth {

  constructor(public http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Token ' + window.localStorage.getItem('token'));
  }
}

Wen你返回一个http请求，它是以Observable格式返回的。除非你想转换成Promises，否则你不必对此做任何事情。

// ../pages/attendances/attendances.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Auth } from '../../providers/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

const baseUrl: string = 'http://localhost:3000/api/v1/';

export class HomePage {

  constructor(public navCtrl: NavController, public auth: Auth) {}

  ionViewDidLoad() {
    this.getAttendances();
  }

  getAttendances() {
    return this.http.get(baseUrl + 'bookings.json', { headers: headers })
      .map(data => {
        // convert your data from string to json
        data = data.json();
      })
      .subscribe(response => {
        // to subscribe to the stream for the response
        console.log(response);
        // you can save your response in object based on how you want it
      })
  }

使用标头授权获取数据Ionic 2

1 个答案: