Question

我遇到了一个奇怪的问题，Angular2的（RC1）Http服务执行两次http.post调用。我已经调试了我的应用程序，我知道这不是点击事件问题。所有通往核心服务的电话都会调用

public create(json: Object, params?: Object): Observable<T> {
    let body = JSON.stringify([json]);
    let headers = this.getHeaders();
    let options = new RequestOptions({ headers: headers });

    return this._http.post(this.createURL(this.getCreateURL(), [], params), body, options)
    .map(res => this.handleObjectResponse(res));
}

运行一次。然后，当我开始跟踪问题时，我发现我的处理程序this.handleObjectResponse被执行了两次。所以我进一步钻研并达到了@angular/http/src/backends/xhr_backend.ts他们这样做的地方

constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
    this.request = req;
    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
        let _xhr: XMLHttpRequest = browserXHR.build();
        _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);
        // load event handler
        ...
        ..

所以我在this.request = req;上放了一个断点，然后在let _xhr: XMLHttpRequest = browserXHR.build();上放了另一个断点，我发现我遇到了第一个断点，但后来又从回调中击中了第二个断点两次。

这让我疯了，所以我想检查是否有人熟悉angular2内部装置是否可以解释这是否是一个错误或者我做错了什么。

在我的代码中，我创建了一些抽象的通用服务类：GenericService和FullService，它扩展了GenericService。这两个都是抽象的并且使用泛型，并且在不同组件中注入的实际服务类都扩展了GenericService或FullService。你们认为这个设置可能是双重执行后的责任吗？

所有想法都表示赞赏！

提前致谢！

P.S。

这不会发生在获取中，但也会发生在put中。

Answer 1

http服务返回一个获得executed on every subscribe的冷可观察对象，您希望将其转换为仅在第一个订阅时执行的热可观察对象，并为后续订阅共享相同的值。

要转换它，您只需要share它：

return this._http.post(this.createURL(this.getCreateURL(), [], params), body, options)
.map(res => this.handleObjectResponse(res))
.share();

Answer 2

这发生在我身上，因为我在表单的一个输入字段上有(key.enter)="someSubmitFunction()"。当我在此字段上按Enter键时，表单将提交两次。显然，这不是必需的。当我删除它时，表单仍会在我按Enter键时提交，但现在只提交一次。

Answer 3

its happening because HTTP OPTIONS executed first, and you have to restrict unwanted HTTP method before executing your Logic, always use isset method,see example below

 if(isset($_POST))
 {
    $name = $_POST["name"];
    $country = $_POST["country"];

    $sql = 'INSERT INTO user values("' . $name . '","' . $country . '")';

            if ( $conn->query($sql)=== TRUE) 
            {
                $outp =  "Inserted " .  $name . "  and  "  . $country;
                echo json_encode($outp);
            } else {
                echo json_encode("Error: " . $sql . "<br>" . $conn->error);
            }
        }


here it will insert row in table only when its POST METHOD.

Angular2 http.post执行两次

3 个答案: