Promise troubles with pnp/sp

Question

I am building an application customiser in SPFX and I am using pnp/sp to get data from a Sharepoint list - all easy so far. I have figured out the code like this, but it is just returning [object promise] here is my code , any help would be brilliant.

I am calling the function like this :

public emailAddressGetter = this.GetSharePointData();

I am trying to show the output like this :

${escape(this.emailAddressGetter.toString())}

and this is the promise I am executing :

  private async GetSharePointData(): Promise<any>
{ 
    let myVar : string;
    var resultData: any = await sp.web.lists
                               .getByTitle('Emails')
                               .items                                     
                               .select('EmailAddress')
                               .getById(99)
                               .get().then((r => {
   myVar = r.EmailAddress;
                         }));                            
    console.log(myVar);
    return myVar;

}

any help would be appreciated, I know I am almost there :) thanks guys

Answer 1

I think your GetSharePointData returns a Promise, because it has async declaration , so you need to execute code asynchronously and wait for the result. Instead of:

public emailAddressGetter = this.GetSharePointData();

${escape(this.emailAddressGetter.toString())}

Try:

this.GetSharePointData()
  .then(res => {
    // res here is myVar
    ${escape(res.toString())};
  });

Answer 2

Firstly fix your code's type annotations. You are completely defeating the point of TypeScript by suppressing the errors the language exists to catch by specifying vacuous types instead of leveraging inference. This isn't Java.

async GetSharePointData() { // return type is inferred as `Promise<string>`
    const result = await sp.web.lists // the `any` you had here was worse than useless. 
                           .getByTitle('Emails')
                           .items                                     
                           .select('EmailAddress')
                           .getById(99)
                           .get();
     const emailAddress= result.emailAddress;
     console.log(emailAddress);
     return emailAddress;
}

Now onto async functions and promises. An async function or method always returns a promise. Assigning the result of calling such a function directly to a property or variable will always result in the behavior you described

GetSharePointData().toString() === "[object Promise]"

The correct approach to setting the property emailAddressGetter (BTW that's a terrible name for that property either way) to the email address that the promise eventually resolves with depends on the context, but here is something you might do.

constructor() {
    this.emailAddressPromise = this.GetSharePointData();
    this.emailAddressPromise.then(emailAddress => this.emailAddress = emailAddress);
 }

But that could be awful and unnecessary unpredictable depending on what you are trying to do.