当没有编写 api 时，如何在 Angular2 中模拟 http observable [英] How can a mock a http observable in Angular2 for when no api is written

问题描述

我是 Angular2 和 Rxjs 的新手，我对特定情况有点困惑.

我有一个简单的服务:

import { Injectable } from '@angular/core';从 'rxjs/Rx' 导入 { Observable, Subject };从@angular/http"导入 { Http, Response };导出接口文章{身份证号码;标题:字符串；内容:字符串；作者:字符串；}@Injectable()导出类 ArticleService {private _articles$: 主题<文章[]>;私有 baseUrl:字符串；私有数据存储:{文章:文章[]};构造函数(私有http:Http){this.baseUrl = 'http://localhost:3000'this.dataStore = { 文章:[] };this._articles$ = <Subject<Article[]>>new Subject();}获取文章$(){返回 this._articles$.asObservable();}加载所有(){//Observable.from(this.dummyData)this.http.get(`${this.baseUrl}/articles`).map(response => response.json()).订阅(数据=> {//调试器;this.dataStore.articles = 数据；//将我们文章列表的新副本推送给所有订阅者.this._articles$.next(this.dataStore.articles)}, 错误 =>console.log('无法加载文章'));}}

这按预期工作，但我想做的是能够在没有 api 端点的情况下开发我的服务，并使用 Observable 稍后我可以将其换成 http.request.我尝试使用 Observable.from 将虚拟数据数组转换为 observable 来执行此操作，但出现错误

<块引用>

输入 '{ id: number;标题:字符串；内容:字符串；作者:字符串；}' 不可分配到类型 'Article[]'

我相信这是因为它分别返回每个项目而不是数组，有人可以指出我应该如何工作的正确方向

更新:为清楚起见，dummyData 看起来像:

private dummyData = [{编号:1，title: '标题 1',内容:'内容1'，作者:'作者1'},{编号:2，title: '标题 2',内容:'内容2'，作者:'作者1'}];

解决方案

更新 1

来自 https://angular.io/guide/deprecations#http

<块引用>

@ANGULAR/HTTP/TESTING 最接近替换在@ANGULAR/COMMON/HTTP/TESTING
MockBackend ==> HttpTestingController
MockConnection ==> HttpTestingController

原创

你可以使用MockBackend

<块引用>

import {BaseRequestOptions, Http} from '@angular/http';从@angular/http/testing"导入 {MockBackend}；it('应该得到一些数据', inject([AsyncTestCompleter], (async) => {无功连接；var 注入器 = Injector.resolveAndCreate([模拟后端，{提供:Http，useFactory:(后端，选项)=>{返回新的 Http(后端，选项)；}, deps: [MockBackend, BaseRequestOptions]}]);var http = injector.get(Http);var backend = injector.get(MockBackend);//将任何新创建的连接分配给局部变量backend.connections.subscribe(c => connection = c);http.request('data.json').subscribe((res) => {期望(res.text()).toBe('awesome');异步完成()；});connection.mockRespond(new Response('awesome'));}));

更新

像这样定义dummyData:

private dummyData = {json:函数(){返回 [{编号:1，title: '标题 1',内容:'内容1'，作者:'作者1'},{编号:2，title: '标题 2',内容:'内容2'，作者:'作者1'}]};}

I'm new to both Angular2 and Rxjs and I am a little confused about a particular case.

I have a simple service:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { Http, Response } from '@angular/http';

export interface Article {
  id: number;
  title: string;
  content: string;
  author: string;
}

@Injectable()
export class ArticleService {
  private _articles$: Subject<Article[]>;
  private baseUrl: string;
  private dataStore: {
    articles: Article[]
  };
  constructor(private http: Http) {
    this.baseUrl = 'http://localhost:3000'
    this.dataStore = { articles: [] };
    this._articles$ = <Subject<Article[]>>new Subject();
  }
  get articles$(){
    return this._articles$.asObservable();
  }

  loadAll(){
    //Observable.from(this.dummyData)
    this.http.get(`${this.baseUrl}/articles`)
    .map(response => response.json())
    .subscribe(data => {
      //debugger;
      this.dataStore.articles = data;
       // Push a new copy of our article list to all Subscribers.
      this._articles$.next(this.dataStore.articles)
    }, error => console.log('Could not load Articles'));
  }
}

And this works as expected , but what I would like to do is to be able to develope my service without a api endpoint and using an Observable that I can later swap out for the http.request . I tried to do this using Observable.from to convert a dummy data array to an observable but I get the errors

Type '{ id: number; title: string; content: string; author: string; }' is not assignable to type 'Article[]'

I believe this is because it is returning each item separately instead of the array , can someone point me in the correct direction of how this should work

Update: for clarity the dummyData look like:

private dummyData = [
      {
        id: 1,
        title: 'Title 1',
        content: 'content 1',
        author: 'author 1'
      },
      {
        id:2,
        title: 'Title 2',
        content: 'content 2',
        author: 'author 1'
      }
    ];

解决方案

Update 1

From https://angular.io/guide/deprecations#http

@ANGULAR/HTTP/TESTING CLOSEST REPLACEMENT IN @ANGULAR/COMMON/HTTP/TESTING
MockBackend ==> HttpTestingController
MockConnection ==> HttpTestingController

Original

You can use MockBackend

import {BaseRequestOptions, Http} from '@angular/http';
import {MockBackend} from '@angular/http/testing';
it('should get some data', inject([AsyncTestCompleter], (async) => {
  var connection;
  var injector = Injector.resolveAndCreate([
    MockBackend,
    {provide: Http, useFactory: (backend, options) => {
      return new Http(backend, options);
    }, deps: [MockBackend, BaseRequestOptions]}]);
  var http = injector.get(Http);
  var backend = injector.get(MockBackend);
  //Assign any newly-created connection to local variable
  backend.connections.subscribe(c => connection = c);
  http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
    async.done();
  });
  connection.mockRespond(new Response('awesome'));
}));

Update

Define the dummyData like:

private dummyData = {
  json: function() {
    return [
      {
        id: 1,
        title: 'Title 1',
        content: 'content 1',
        author: 'author 1'
      },
      {
        id:2,
        title: 'Title 2',
        content: 'content 2',
        author: 'author 1'
      }
    ]};
}

这篇关于当没有编写 api 时，如何在 Angular2 中模拟 http observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！