javascript - 如何根据使用 Angular2 发出的 post 请求的响应呈现输出

Question

目前，当用户输入电子邮件 ID 和密码并进行服务器调用时，我会弹出登录窗口。我如何根据收到的回复使用react？早些时候，当我使用 javascript 时，我是按以下方式完成的:

submitHandler: function(form) {
        $('.signin_form').attr('disabled','disabled')

        var data = {}
        $(form).serializeArray().map(function(x){data[x.name] = x.value;});
        helperMethods.ajaxHandler(accounts_url+'login_user/','POST',
        data,authHelpers.afterLogin)
   }

这样做时，这被称为:

var authHelpers = {    
    afterLogin : function(response){
    $('.signin_form').removeAttr('disabled')

    if(response.message!=undefined){
        if(typeof response.message.validation!='undefined'
         && response.message.validation.indexOf('verifi')!='-1'){
             $('.error_display').html('<div>Error</div>')

        }else{
            $('.error_display').text(response.message.validation)

        }
        $('input[name="password"]').val('')
        return;
    }
    if(response.token!=''){
       localStorage.setItem('jwt_token',response.token)
       window.location.reload()
    }

}
}

如何使用 angular2 和 Typescript 实现相同的功能？

谢谢。

Answer 1

您需要使用 Angular2 http 客户端发出 POST 请求，并使用 Observable subscribe 方法来详细说明响应。

这里是发出 POST 命令的服务类示例

import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions, Response} from 'angular2/http';
import {Environment} from '../settings/environment.service';
import {BackEndService} from '../app/backEnd.service';

@Injectable()
export class BackEndRestService extends BackEndService {

    constructor(private _http: Http, private _environment: Environment) {
        super();
    }

    authorize(inAccessCode: string) {
        let myUrl = this._environment.baseRestServicesUrl + 'authorize';
        let options = this.getOpionsForPost();
        let jsonString = JSON.stringify({_accessCode: inAccessCode});
        return this._http.post(myUrl, jsonString, options)
                                .catch(this.handleError)
    }

private handleError (error: Response) {
    return Observable.throw(errorText || 'Server error');
}

    private getOpionsForPost() {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return new RequestOptions({headers: headers});
    }
}

这是调用该服务的代码

this._backEndService.authorize(this._user.accessCode)
                .subscribe(
                    data => {
                        let retJson = data.json();
                        if (retJson.code == 'OK') {  // do stuff
                            } else {
                                // manage the situation when the server responds KO
                    },
                    err => {
                        // manage errors;
                    },
                    () => console.log('Authorization Complete')
                );

希望这有帮助