相关疑难解决方法(0)

我在Angular中遇到HTTP问题.

我只想要GET一个JSON列表并在视图中显示它.

服务类

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

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

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

在HallListComponent我getHalls从服务中调用方法:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

但是,我有一个例外:

TypeError:this.http.get(...).map不是[null]中的函数 …

我正在构建一个Angular2应用程序,其中一个组件需要进行多个API调用,这些调用依赖于之前的API调用.

我目前有一个服务,它进行API调用以获取电视节目列表.对于每个节目,我需要多次调用不同的API来逐步完成结构,以确定节目是否存在于Plex服务器上.

API文档在这里

对于每个节目,我需要进行以下调用并获取正确的数据以确定它是否存在:(假设我们有变量<TVShow>, <Season>, <Episode>)

http://baseURL/library/sections/?X-Plex-Token=xyz 会告诉我: title="TV Shows" key="2"

http://baseURL/library/sections/2/all?X-Plex-Token=xyz&title=<TVShow> 会告诉我: key="/library/metadata/2622/children"

http://baseURL/library/metadata/2622/children?X-Plex-Token=xyz 会告诉我: index="<Season>" key="/library/metadata/14365/children"

http://baseURL/library/metadata/14365/children?X-Plex-Token=xyz会告诉我:index="<Episode>"这意味着我的插曲存在.

响应是在json中,我删除了很多多余的文本.在每个阶段,我需要检查正确的字段是否存在(<TVShow>, <Season>, <Episode>),以便它们可以用于下一次调用.如果没有,我需要返回该节目不存在.如果是的话,我可能想要为节目返回一个id.

我看了很多例子,包括promise,async和flatmap,但我不知道如何根据我见过的其他例子解决这个问题.

• 如何在Angular2中链接Http调用
• Angular 2.0和Http
• Angular 2 - 当Http请求依赖于另一个Http请求的结果时该怎么办
• Angular 2链接Http Get Iquests with Iterable Array
• nodejs async:多个依赖的HTTP API调用
• 如何使用'request'和'async'在nodeJS上收集Web API的结果

这是我获取节目列表的方法.(shows.service.ts)

export class ShowsHttpService {
    getShows(): Observable<Show[]> {
        let shows$ = this._http
            .get(this._showHistoryUrl)
            .map(mapShows)
            .catch(this.handleError);
        return shows$;
    }
}

function mapShows(response:Response): Show[] {
    return response.json().data.map(toShow);
}

function toShow(r:any): Show { …

我有一个基于令牌的身份验证机制的API.成功登录后,我在浏览器的本地存储中存储了两个令牌 - 访问和刷新令牌.访问令牌包含在服务器端授权用户所需的所有必要信息,并且它具有到期日期.当访问令牌过期时,客户端可以使用刷新令牌请求新的访问令牌,并且在响应中它将获得一对新令牌.

在角度1.x中,实现非常简单明了.例如,我们可以使用拦截器:

httpInterceptor.$inject = ['$httpProvider'];
function httpInterceptor($httpProvider) {
  $httpProvider.interceptors.push(handleStaleAccessToken);

  handleStaleAccessToken.$inject = ['$q', '$injector', 'session'];
  function handleStaleAccessToken($q, $injector, session) {

    function logoutAndRedirect() {
      var authenticationRedirect = $injector.get('authenticationRedirect');
      session.destroy();
      authenticationRedirect.toLoginPage();
    }

    return {
      responseError: function(rejection) {
        // Do nothing for non 403 errors
        if (rejection.status !== 403) {
          return $q.reject(rejection);
        }

        var errorCode = rejection.data.error && rejection.data.error.code;
        if (errorCode === 'access_token_expired') {
          var $http = $injector.get('$http');

          // Refresh token
          var params = { refreshToken: session.getRefreshToken() };
          return $http.post('/api/auth/refresh', params).then(function(response) { …