正在调用Angular 2+ http服务,但请求不会出现

时间:2017-04-28 20:48:34

标签: javascript angular

我希望能够实例化一个模型类,但也能让它访问服务。

例如,假设我有这些端点:

/book/:id
/book/:id/author

我希望有一个BooksService服务来获取Book个实例的列表。我希望使用new实例化书籍实例,通过构造函数给定JSON定义,同时仍然能够使用Angular依赖项。

我想做的例子:

BooksService.getBook(1)       // makes call to /book/1
    .subscribe((book) => {
        book.getAuthor()  // makes call to /book/1/author
        ...
    });

为实现这一目标,我尝试使用工厂new书籍模型的实例。然后我传入对工厂注入的Http注入依赖项的引用。

这就是我所拥有的:

BooksService

@Injectable()
export class BookService {
    constructor(
        private http: Http,
        private bookModelFactory: BookModelFactory
    ) {}

    getBook(): Observable<BookModel> {
        return this.http.get('http://localhost:3000/book/1')
            .map((res) => {
                return this.bookModelFactory.make(res.json().data);
            });
    }
}

BookModel,BookModelFactory

@Injectable()
export class BookModelFactory {
    constructor (private http: Http) {}

    make(def: object): BookModel {
        var book = new BookModel(def);
        book.http = this.http;
        return book;
    }
}

export class BookModel {
    def: any;
    http: Http;

    constructor (def: object) {
        this.def = def;
    }

    getAuthor() {
        console.log('http', this.http);
        this.http.get('http://localhost:3000/book/1/author');
    }
}

当我尝试使用此代码时,我在book.getAuthor()中看到了http对象的控制台日志。它存在,我可以在其上看到get方法。但它从未提出API请求。网络标签中的任何内容都没有关于/book/1/author的调用的任何内容。没有错误。简单地说,没有任何反应。

为什么在this.http.get('...')中调用getAuthors()时没有提出请求?

提前致谢。

使用Angular 4.

(为简洁起见,删除了Imports语句)

1 个答案:

答案 0 :(得分:2)

  

2)如果这是一个好的策略...为什么在getAuthors()中调用this.http.get('...')时不会发出请求?

因为没有人订阅过此次通话的结果:

getAuthor

如果您没有订阅HTTP调用的结果,则在角度中,将永远不会进行此调用。

或者您希望Observable<Author>方法返回getAuthor(): Observable<Author> { return this.http.get('http://localhost:3000/book/1/author').map(res => { return res.json().data; }); } ,以便该方法的调用者可以订阅结果:

BooksService.getBook(1)       // makes call to /book/1
    .subscribe(book => {
        book.getAuthor() // makes call to /book/1/author
            .subscribe(author => {
                // do something with the book author here
            });
        ...
    });

以便您以后可以订阅:

{{1}}

请记住,如果您不订阅,则不会进行AJAX调用。