Question

我有一个用Angular4编写的测试数据服务。它目前看起来像这样：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/toPromise'


@Injectable()
export class DataService {

  constructor(private http: Http) { }

fetchData(){
  return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

}

感谢此代码的“The Net Ninja”，因为该应用程序的这一部分基本上与教程代码完全相同（我更喜欢在构建新应用程序时有一些应该是用于测试目的的已知工作示例）...

问题在于虽然https://dinstruct-d4b62.firebaseio.com/.json肯定存在测试数据，但是当应用程序进入{{1}时，我无法以任何方式隐藏或防火墙（可通过浏览器直接访问）功能，它记录：

fetchData()

在堆栈跟踪的开始处。可能会发生什么？

更新

我还注意到在调用函数中：

    ERROR Error: Uncaught (in promise): Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json
Error: Response with status: 404 Not Found for URL: https://dinstruct-d4b62.firebaseio.com/.json

当我在代码中有ngOnInit(): void { this.customerService.getCustomers() .then(customers => this.customers = customers); this.dataService.fetchData().subscribe( (data) => console.log(data)); }时，点击指向信息中心的链接，它会立即在浏览器地址栏中显示this.dataService.fetchData().subscribe((data) => console.log(data));，然后立即回显显示以前的网址。但是，当我删除此行时，应用会正确显示localhost:3000/dashboard整个时间。我假设这可能与console.logged 404错误有关。

同样令人困惑的是，当我检查网络流量时，不显示404。

更新

当observable更改为promise时，我在控制台中获得此输出：

localhost:3000/dashboard

网络流量中仍然没有404。

我现在已将调用函数更新为：

Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}
headers
:
Headers
ok
:
false
status
:
404
statusText
:
"Not Found"
type
:
null
url
:
"https://dinstruct-d4b62.firebaseio.com/.json"
_body
:
Object
error
:
"Collection 'undefined' not found"
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function ()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
__proto__
:
Body
constructor
:
function Response(responseOptions)
toString
:
function ()
__proto__
:
Object

Answer 1

in-memory-web-api会干扰您的“外部”请求。你需要从你的NgModule中删除它，因为否则Angular总是试图在你的请求中查找in-memory-web-api，这显然在那个地方不存在。所以删除等效的

InMemoryWebApiModule.forRoot(InMemoryDataService)

来自你的ngModule的

应该清除它！ :)

Answer 2

尝试导入import 'rxjs/add/operator/toPromise';并将toPromise添加到fetchData（）函数中http get的末尾。

fetchData(){
    return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json').map(
    (res) => res.json()).toPromise();
}

您的通话功能应如下所示：

this.dataService.fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => console.error(error));

Answer 3

在您已导入[]的AppModule.ts中，您将已导入 HttpClientInMemoryWebApiModule 像=>

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false }
    ),

现在，这里发生的事情是您的应用程序正在内存Web API中搜索公共API只是为了解决此问题，只是通过将未知的URL设置为true来告诉内存模块不像那样像=>

HttpClientInMemoryWebApiModule
    .forRoot(
      InMemoryService, { dataEncapsulation: false, passThruUnknownUrl: true }
    )

Angular4为存在且公开服务的json数据提供404

3 个答案: