Question

我在Angular2中构建应用时遇到问题。我尝试使用JasonWatsMore中的教程提供身份验证服务。

我的问题是：当我使用像这样的经典HTTP请求创建一个observable时：

import {Injectable} from '@angular/core'
import {Http} from '@angular/http'
import {Olders} from '../_models/index'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/do'

@Injectable ()

export class OldersService {

  constructor(private _http:Http) {

  }

  getOldersfromAPI(){
    return this._http.get('/app/ressources/jsons/clients.json')
      .do(x => console.log(x))
       .map(olders => {return olders = olders.json()});
  }
}

在这样的组件中：

import {Component, OnInit} from '@angular/core'

import {Olders} from '../_models/index'
import {OldersService} from '../_services/index'



@Component({
  moduleId: module.id,
  selector: 'yearbook',
  templateUrl: 'yearbook.component.html',

})

export class YearbookComponent implements OnInit {

  olders : Olders[];

  constructor(
    private _oldersService : OldersService
  ){}


  ngOnInit() {

        this._oldersService.getOldersfromAPI()
            .subscribe( res => {this.olders = res,
              console.log(this.olders)},
              err => console.error(err.status)
              );
  }
}

控制台没有显示任何内容（它应该显示我的.json与.do），并且网络活动没有显示我正在尝试加载某些东西（它应该显示.json）

当我从app.module.ts上的提供程序中删除标识和fakeBackendProvider时，它运行良好

我假设http方法不能使用这个假的后端，但我不知道如何使用这个方法而不是http来获取我的json ......

这是fakeBackendProvider

import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod 
} from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';

export function fakeBackendFactory(backend: MockBackend, options: 
BaseRequestOptions) {
    // configure fake backend
    backend.connections.subscribe((connection: MockConnection) => {
        let testUser = { username: 'test', password: 'test', firstName: 
'Test', lastName: 'User' };

    // wrap in timeout to simulate server api call
    setTimeout(() => {

        // fake authenticate api end point
        if (connection.request.url.endsWith('/api/authenticate') && connection.request.method === RequestMethod.Post) {
            // get parameters from post request
            let params = JSON.parse(connection.request.getBody());

            // check user credentials and return fake jwt token if valid
            if (params.username === testUser.username && params.password === testUser.password) {
                connection.mockRespond(new Response(
                    new ResponseOptions({ status: 200, body: { token: 'fake-jwt-token' } })
                ));
            } else {
                connection.mockRespond(new Response(
                    new ResponseOptions({ status: 200 })
                ));
            }
        }

        // fake users api end point
        if (connection.request.url.endsWith('/api/users') && connection.request.method === RequestMethod.Get) {
            // check for fake auth token in header and return test users if valid, this security is implemented server side
            // in a real application
            if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                connection.mockRespond(new Response(
                    new ResponseOptions({ status: 200, body: [testUser] })
                ));
            } else {
                // return 401 not authorised if token is null or invalid
                connection.mockRespond(new Response(
                    new ResponseOptions({ status: 401 })
                ));
            }
        }

    }, 500);

});

return new Http(backend, options);
}

export let fakeBackendProvider = {
    // use fake backend in place of Http service for backend-less development
    provide: Http,
    useFactory: fakeBackendFactory,
    deps: [MockBackend, BaseRequestOptions]
};

我尝试使用Plunker重现错误，但效果不佳。这是Plunker

FakeBackendProvider阻止Angular 2中的http请求（Observables无效）

0 个答案: