How to make Pnp function async in spfx framework

Question

I need to get data from a function as below.

GetServiceListData():any  
  { 
    var resultData;
    pnp.sp.web.lists.getByTitle('Test').items.select('Title,FullName,DOJ,ManagerName/Title').expand('ManagerName').get(asy).then(function(data) {
      resultData= data;
    });
}

This method is calling synchronous in which I am unable to get the data in the first time when trying to call in other function. How we can make a pnp function to call async?

Glad for any help..

Answer 1

You need to ensure that your function is async. Only if its async can you use await inside that function.

You can modify the below code:

private async GetServiceListData():any  
{ 
    var resultData: any = await pnp.sp.web.lists
                               .getByTitle('Test')
                               .items                                     
                               .select('Title,FullName,DOJ,ManagerName/Title')
                               .expand('ManagerName').get();    

    //do something with the data
    console.log(resultData);
}

Reference - Typescript Async/Await

Answer 2

As i understand your question, you need to handle the response data outside of given function. In this case you can simply return the pnp func call, so it returns a Promise:

function GetServiceListData():Promise<any>  
{ 
    return pnp.sp.web.lists.getByTitle('Test').items
        .select('Title,FullName,DOJ,ManagerName/Title')
        .expand('ManagerName')
        .get();
}
function successCallback(response){
    //do things with response in a callback
}
function errorCallback(error){
    //handle error
}
//usage
GetServiceListData()
    .then(successCallback)
    .catch(errorCallback);

If you want to do some preprocessing with the response data first, you have two options.

First you can go with async function to flattern out your function for readability

async function GetServiceListData():Promise<any>
{ 
    let preprocessedData;
    let response;
    try {
        response = await pnp.sp.web.lists.getByTitle('Test').items
        .select('Title,FullName,DOJ,ManagerName/Title')
        .expand('ManagerName')
        .get();

        //do things with response in place
    } catch(error) {
        //handle error
    }

    //do things with response in place
    return preprocessedData;
}

Or you can still use the Thenable format. In this case you need to return the preprocessed data inside the .then

function GetServiceListData():Promise<any>  
{ 
    return pnp.sp.web.lists.getByTitle('Test').items
        .select('Title,FullName,DOJ,ManagerName/Title')
        .expand('ManagerName')
        .get()
        .then(response => {
            let preprocessedData;
            //do things with response
            return preprocessedData;
        });
}

Important to notice, that in all cases, you are returning a Promise, so you can use the .then and .catch methods to do stuff with the data outside GetServiceListData.

Promise

Async function