在 Angular 2 中将 Promise 对象转换为 JSON

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，它就无法正常工作。

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

Answer 1

要回答您的问题，您可以使用从 http 订阅 observable 中可用的 response.okboolean。

因此，根据您的代码，您可以将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 帖子返回的 observable，如下所示：

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);
    });
}

希望这会有所帮助！

Answer 2

你可以这样做：

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。