将 Promise 对象转换为 JSON in Angular 2

Question

我正在尝试创建一个 HTTP POST，然后检查响应以查看它是失败还是成功。

HTTP 调用如下所示：

doLogin(credentials) {
    var header = new Headers();
    header.append('Content-Type', 'application/x-www-form-urlencoded');
    var body = 'username=' + credentials.username + '&password=' + credentials.password;
    return new Promise((resolve, reject) => {
        this.http.post(this.url, body, {
            headers: header
        })
            .subscribe(
                data => {
                    resolve(data.json());
                },
                error => {
                    resolve(error.json());
                }
            );
    });

}

这个函数的调用如下：

data: Object;
errorMessage: Object;

login($event, username, password) {
    this.credentials = {
        username: username,
        password: password
    };

    this._loginService.doLogin(this.credentials).then(
        result => {
            this.data = result;
            console.log(this.data);
        },
        error => {
            this.errorMessage = <any>error;
            console.log(this.errorMessage);
        });
}

在Chrome控制台上，数据如下：

Object {status: "Login success", token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjcmlzdGkiLCJ1c2VyS…blf1AzZ6KzRWQFNGXCrIeUHRG3Wrk7ZfCou135WmbVa15iYTA"}

如何访问 Angular 2 中的状态？因为如果我尝试访问 this.data.status，它不起作用。

我应该创建一个具有状态和令牌属性的 class 吗？

Answer 1

你可以这样做：

data: Object;
errorMessage: Object;

login($event, username, password) {
    this.credentials = {
        username: username,
        password: password
    };

    this._loginService.doLogin(this.credentials).then(
        (result: any) => {
            this.data = result;
            console.log(this.data);
            console.log(this.data.status);
        },
        error => {
            this.errorMessage = <any>error;
            console.log(this.errorMessage);
        });
}

将 result 设置为键入任意。这样你就可以访问 status，但是你可以创建一个 class 并在你的 service 中使用 rxjs/map 来填充 class 如果你如此渴望。

Answer 2

要回答您的问题，您可以使用 response.ok 布尔值，该值在订阅 http 的可观察对象时可用。

因此，根据您的代码，您可以将 data 对象直接传递给 promise 并在解析 data.json.

之前检查 data.ok

//...
return new Promise((resolve, reject) => {
    this.http.post(this.url, body, {
        headers: header
    })
        .subscribe(resolve,
         error => {
                reject(error.json());
            }
        );
});

// then you would have something like this:

this._loginService.doLogin(this.credentials).then(
    result => {
        if (result.ok) {
            this.data = result;
            console.log(this.data);
        }
    },
    error => {
        this.errorMessage = <any>error;
        console.log(this.errorMessage);
    })

建议

现在，我建议取消承诺，因为我相信您并不真正需要它。使用您的服务的任何人都可以订阅 http post 返回的可观察对象，如下所示：

doLogin(credentials) {
    let header = new Headers();
    header.append('Content-Type', 'application/x-www-form-urlencoded');
    var body = 'username='+credentials.username+'&password='+credentials.password;
    return this.http.post(this.url, body, { headers: header });
}

然后，登录时：

login($event, username, password) {
    this.credentials = {
        username: username,
        password: password
    };

    this._loginService.doLogin(this.credentials).subscribe(response => {
        if (response.ok) { // <== CHECK Response status
            this.data = response.json();
            console.log(this.data);
        } else {
            // handle bad request
        }
    },
    error => {
        this.errorMessage = <any>error;
        console.log(this.errorMessage);
    });
}

希望对您有所帮助！

将 Promise 对象转换为 JSON in Angular 2

Convert Promise object to JSON in Angular 2

json

angular2-http

angular