Angular2 Get 请求被发出两次

Question

我遇到一个问题，Angular2 两次发出相同的请求。不过，我不知道为什么，因为我只有一次订阅 Observable。这是我的代码：

我的服务是这样的：

getProjects(): Observable<Project[]> {
    return this.http.get(this.url)
        .map(this.mapProjects)
        .catch(this.handleError);
}

 private mapProjects(response: Response): any {
    const mappedProjects = response.json();
    return mappedProjects;
}

我的组件如下所示：

export class ProjectListComponent implements OnInit {

// List of projects
listProjects: Project[] = [];

constructor(private projectListService: ProjectListService) {
 }

public getProjectList() {
    this.projectListService.getProjects()
        .subscribe(
        projects => {
            this.listProjects = projects;
        },
        error => {
            // error handling
        });
}
}

在 Chrome 开发人员工具的网络选项卡中，我看到发出了两次请求，一次发起者是 zone.js，另一次只是说 "Other"。谁能解释这种行为？

Answer 1

不确定没有看到你的整个代码库，但这将修复它...

.getProjects().first().subscribe(  ... etc

您需要添加

import 'rxjs/add/operator/first';

第一个运算符确保只调用一次订阅。但是，如果您需要多次调用它（例如稍后发生事件时），那么这将不是您的解决方案。

PS 每次 Observable 流发出时都会调用订阅。如果流发出两次，则订阅被调用两次。您可以使用 do()

调试 Observable 以查看它发出的内容

它会调用它两次，如果...

1 - 你订阅了两次，它发出了一次，确保你没有多次调用订阅

2 - 它发出两次

Answer 2

我认为这是预检请求。这些是在实际请求之前进行的。您的预检响应需要确认这些 headers 以便实际请求 work.Once 您将此响应发送到预检请求，浏览器将发出实际请求。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Answer 3

在没有看到代码的情况下，我只能猜测您的组件是由路由器打开的，并且您已经配置了一个调用 getProjects() 的解析器。在这种情况下，解析器隐式订阅了 getProjects() 返回的 Observable。因此，您会遇到两次调用 subscribe() 的情况：一次显式调用，一次隐式调用。

Angular2 Get 请求被发出两次

Angular2 Get Request is made twice

subscribe

rxjs

typescript

angular