角 2/4 |如何使用 Token 获取 API 数据

Question

早安，

如何使用 angular 2/4 获取带有令牌的 api 数据？

这是我的代码：

import { Component, ViewEncapsulation } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {

private apiUrl = 'http://apiurlhere.xom/data';
data: any = {};

constructor(private http: Http){
    console.log('hi');
    this.getVoicepickData();
    this.getData();
}

//set API header
    let headers = new Headers({
        'Token': "XXXXXXXXXXTOKEN HEREXXXXXXXXXX",
        'Content-Type': 'application/json'
    });

    getData(){
        return this.http.get(this.apiUrl, {headers: headers})
            .map((res: Response) => res.json())
    }

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

我收到错误消息：模块解析失败：函数之外的“返回”。有人可以告诉我如何使用令牌获取 api 数据吗？感谢您的帮助。

Answer 1

您不能在函数范围之外设置变量。但是，您可以将其设置为公共属性或在函数 getData 本身内。

希望对你有帮助

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {

private apiUrl = 'http://apiurlhere.xom/data';
data: any = {};
headers: Headers;

constructor(private http: Http){
    console.log('hi');
    this.getVoicepickData();
    this.getData();

    this.headers = new Headers({
        'Token': "XXXXXXXXXXTOKEN HEREXXXXXXXXXX",
        'Content-Type': 'application/json'
    });
}

    // YOU CANNOT SET SOMETHING HERE

    getData(){
        return this.http.get(this.apiUrl, {headers: this.headers})
            .map((res: Response) => res.json());
    }

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