如果没有编写api,如何在Angular2中模拟一个http observable [英] How can a mock a http observable in Angular2 for when no api is written
问题描述
我是Angular2和Rxjs的新手,我对某个特定情况感到有点困惑。
I'm new to both Angular2 and Rxjs and I am a little confused about a particular case.
我有一个简单的服务:
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'));
}
}
这可以按预期工作,但我想要的是什么要做的是能够在没有api端点的情况下开发我的服务,并使用一个Observable,我以后可以替换 http.request
。我尝试使用Observable.from将虚拟数据数组转换为observable,但我得到了错误
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
输入'{id:number;标题:字符串;内容:字符串;作者:string; }'不能分配给'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
更新:
for清晰度dummyData看起来像:
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'
}
];
推荐答案
您可以使用 MockBackend
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'));
}));
更新
定义 dummyData
,如:
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屋!