Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2 Http Post发送两个ajax调用而不是一个大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我试图围绕角度的可观察模式实现包围我似乎有一些问题.这是我的代码

import 'rxjs/Rx';
import {Injectable,EventEmitter} from 'angular2/core';
import {http,Response,requestOptions,Headers,URLSearchParams} from 'angular2/http';
import {ObservablE} from 'rxjs/Observable'
import {GuidservicE} from './guid.service';

@Injectable()
export class httpservice {
    private http: http;
    private guidservice: Guidservice;
    public ajaxStarted: EventEmitter<String> = new EventEmitter();
    public ajaxCompleted: EventEmitter<String> = new EventEmitter(); 

    constructor(http: http,guidservice: GuidservicE) {
        this.http = http;
        this.guidservice = guidservice;
    }

    public post(url: String,model: any): Observable<Response> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new requestOptions({ headers: headers });

        //Create unique id for each ajax call
        let httpCallId = this.guidservice.new();

        //Let Loading Box components that an ajax call has been triggered
        this.ajaxStarted.emit(httpCallId);

        let httpPost = this.http.post(url,JSON.Stringify(model),options);

        //Let Loadinc Box Component kNow that ajax call has been completed
        httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId));

        return httpPost;
    }

}

这是我在代码提交时调用代码

@Component({
    SELEctor: 'register',templateUrl: './app/account/components/register.view.html',directives: [ROUTER_DIRECTIVES]
})
export class RegisterComponent {
    private accountDataservice: AccountDataservice

    public registerviewmodel: Accountviewmodel.UserRegistrationviewmodel;

    constructor(accountDataservice: AccountDataservicE) {
        this.accountDataservice = accountDataservice;
        this.registerviewmodel = <Accountviewmodel.UserRegistrationviewmodel>{};
    }

    public register() {
        this.accountDataservice.register(this.registerviewmodel).subscribe(x => {
            console.log(X);
        })
    }
}     

<form (ngSubmit)="register()" #userRegistrationForm="ngForm">
            <div class="form-group">
                <input class="form-control" 
                       type="email" 
                       placeholder="Email Address"
                       [(ngModel)]="registerviewmodel.userName" />
            </div>
            <div class="form-group">
                <input class="form-control" 
                       type="password" 
                       placeholder="password"
                       [(ngModel)]="registerviewmodel.password" />
            </div>
            <div class="form-group">
                <input class="form-control" 
                       type="password" 
                       placeholder="password Confirmation"
                       [(ngModel)]="registerviewmodel.confirmpassword" />
            </div>
            <div class="form-group">
                <button type="submit" 
                        class="btn btn-fluid btn-priMary"
                        [disabled]="!userRegistrationForm.form.valid">Register</button>
            </div>
        </form>

现在我的问题是当我点击提交按钮而不是一个ajax调用来发送到服务器.我已经通过在服务器上放置一个制动点并且两个呼叫到达来检查这一点.

只有在点击按钮时才会调用注册函数.

我注意到我的问题是这一行:

httpPost.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId));

如果我评论它只有一个ajax调用被发送到服务器.

我理解observables的方式是,当可观察值发生变化时,每个订阅都会被触发.

在这做错了什么?

更新:

该问题显然也在get调用中复制.我的应用程序中的所有get调用调用函数

public get(url: String,model: any = {}): Observable<Response> {
    let httpCallId = this.guidservice.new();

    this.ajaxStarted.emit(httpCallId);

    let httpGet = this.http.get(url,new requestOptions({
        headers: this.gethttpHeaders(),search: this.createURLSearchParams(model)
    }));

    httpGet.subscribe(success => this.ajaxCompleted.emit(httpCallId),error => this.ajaxCompleted.emit(httpCallId));

    return httpGet;
}

解决方法

我猜你订阅了两次你的POST observable,因为你在httpservice的post方法订阅了一次并返回它.您可能会在应用程序的另一部分中再次订阅此返回的observable:

public post(url: String,model: any): Observable<Response> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new requestOptions({ headers: headers });

    //Create unique id for each ajax call
    let httpCallId = this.guidservice.new();

    //Let Loading Box components that an ajax call has been triggered
    this.ajaxStarted.emit(httpCallId);

    let httpPost = this.http.post(url,options);

    //Let Loadinc Box Component kNow that ajax call has been completed
    httpPost.subscribe(success => { // <-------
        this.ajaxCompleted.emit(httpCallId);
    },error => {
       this.ajaxCompleted.emit(httpCallId);
    });

    return httpPost;
}

由于认情况下observable是冷的,因此相应的请求将被执行两次(如果订阅两次).

大佬总结

以上是大佬教程为你收集整理的Angular 2 Http Post发送两个ajax调用而不是一个全部内容,希望文章能够帮你解决Angular 2 Http Post发送两个ajax调用而不是一个所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。