Get current user profile details in spfx

Question

How to get current user profile details using plain Typescript in SharePoint framework. I am not using JSOM or csom.

Answer 1

I am using react framework for my SPFx web part and the following example uses the same. But the syntax to call the User Profile REST API is same.

this.props.spHttpClient.get(`${this.props.siteUrl}/_api/sp.userprofiles.peoplemanager/GetMyProperties`,SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse): Promise<{ value: IUser[] }> => {
    return response.json();
}).then((response: { value: IUser[] }): void => {
    alert(response.value);
    this.setState({
        status: '',
        items: response.value
    });
}, (error: any): void => {
    this.setState({
        status: "Failed to load profile...",
        items: []
    });
});

Answer 2

I've been using pnp core for this. Its less code

pnp.sp.profiles.myProperties.get()

  .then(userprops => {

    // get your props
}
});

https://gallery.technet.microsoft.com/office/Retrieve-User-Profile-926406f5