Question

我知道这个问题在stackover流程中是可用的，我相信我，我已经完成了它。基于此，我发现我的代码没有问题。虽然我的休息api被叫了两次。

我的代码段如下：

组件：

    export class Component  {

        constructor(private _nService: NService) {
            this.categoryList = this._nService.getCategories();
            this.getMessage();
        }

     getMessage() {
        console.log('inside getMessagecomponent');
        this._nService.getNotifications().subscribe(notifications => {
            console.log('Calling Service...');
        });

     }
    }

服务

@Injectable()
export class NService {

    constructor(private http: Http) { }

   getNotifications() {
        console.log('inside getNotification service');      
        return this.http.get(URL)
            .map((res: Response) => res.json());
    }

}

我已经将console.log放在组件和服务中，只是为了分析方法是否从其他地方调用或者是否被调用两次。

我发现组件和服务中的console.log只被调用一次。但是，我的其余api正在通过此请求调用两次。

我尝试过.share（），但它不适用于我的情况。
此外，我试图取消订阅我的电话，但也无法正常工作

我的console.log显示的顺序：

在getMessagecomponent组件中
在getNotification服务中
致电服务......

PS：这是我项目中所有api的讨价还价。

接头：

Request 1:
----------------

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, X-Requested-With, remember-me, x-dd-cust, x-dd-apitoken
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin:http://localhost:8425
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Mon, 20 Mar 2017 07:00:40 GMT
Expires:0
Pragma:no-cache
Transfer-Encoding:chunked
X-Application-Context:application:dev:8085
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

Response 1:
---------------

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Type:application/json
Host:localhost:8085
Origin:http://localhost:8425
Referer:http://localhost:8425/dashboard
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
x-dd-apitoken:TOKEN
x-dd-cust:name

Request 2:
--------------

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type, Accept, X-Requested-With, remember-me, x-dd-cust, x-dd-apitoken
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin:http://localhost:8425
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Mon, 20 Mar 2017 07:00:40 GMT
Expires:0
Pragma:no-cache
Transfer-Encoding:chunked
X-Application-Context:application:dev:8085
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

Resposne 2:
------------

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Type:application/json
Host:localhost:8085
Origin:http://localhost:8425
Referer:http://localhost:8425/dashboard
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
x-dd-dd:TOKEN
x-dd-cust:name

更新

我在开发者控制台中发现它不是OPTION请求，因为我可以在网络选项卡中看到2 GET请求。

Answer 1

“我的console.log显示的顺序：

在getMessagecomponent组件

中在getNotification服务中

致电服务......“

如果你的序列是这样的，那你就不会发出2 get个请求

getNotifications将返回observable，它不会发出get个请求。您的subscribe方法会触发get请求，如果您要发出跨域请求，则您的某个网络呼叫将是OPTIONS请求。

Answer 2

我认为您需要添加Observable的共享功能

import 'rxjs/add/operator/share';

export class Component  {

    constructor(private _nService: NService) {
        this.categoryList = this._nService.getCategories();
        this.getMessage();
    }

 getMessage() {
    console.log('inside getMessagecomponent');
    this._nService.getNotifications().subscribe(notifications => {
        console.log('Calling Service...');
    }).share();

 }
}

角度2中的http请求被调用两次

2 个答案: