CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Ronno
Ronno

Reputation: 23

Cannot figure out how to correctly format async functions so that the script pauses, awaiting the return call

I'm trying to figure out how to correctly use asynchronous functions for the purpose as described below.

<code>
async function commentGrabSwitchboard(){
  let prevStored = await checkStorage();
  if(IsAmazonFirstProductPage(document)){
    if(prevStored == undefined){
      collectProductComments();
    }else{
      console.log("Results retrieved from chrome local storage: \n" + JSON.parse(prevStored));
    }
  }
}
</code>

This function is designed as a switchboard. It does one of two things - either call collectProductComments or (for now) console log a result - dependant on the return value of the checkStorage function:

<code>
async function checkStorage(){
  let key = location.host + location.pathname;
  try{
    chrome.storage.local.get(key, function(result) {
        let returnData = result[key];
        return returnData;
    });
  }catch(err){
    console.log("Results for domain: " + key + "could not be retrieved from chrome local storage. Error: " + err);
  }
}
</code>

This function checks local storage for a value, and returns that value. If it should find nothing, the return value is undefined. The problem I am encountering is that the script does not wait for checkStorage to resolve after declaring the variable prevStored = checkStorage, and so the if statement "prevStored == undefined" is always true. I have verified that the checkStorage function does return the expected value from local storage.

Could anyone give me some pointers as to how I've done things incorrectly? Any alternative solutions are also welcome. Thanks.

temporary: changes to second function

function checkStorage(){
  let key = location.host + location.pathname;
  let storageSearched;
  let returnData;
  try{
    chrome.storage.local.get(key, function(result) {
        returnData = result[key];
        storageSearched = true;
    });
  }catch(err){
    console.log("Results for domain: " + key + "could not be retrieved from chrome local storage. Error: " + err);
    storageSearched = false;
  }
  let promise =  new Promise((resolve, reject) => {
    if(storageSearched){
      resolve(returnData);
    }else{
      reject();
    }
  });

  promise.then(function(fromResolve){
    return fromResolve;
  });
}

Upvotes: 0

Views: 79

Answers (1)

Quentin
Quentin

Reputation: 943214

Your first function is fine. The problem is with the second function.

Your first function is awaiting the second. You can only await a promise. The second function returns a promise. (So far as good).

The second function does not wait for chrome.storage.local.get before the promise resolves. It just gets to the end, has no return statement, and resolves the promise (created via the async keyword) as undefined.

So:

  • Remove the async keyword from the second function
  • Create a promise with new Promise() inside the second function
  • Return that promise
  • Resolve that promise with returnData instead of pointlessly returning returnData from the callback function.

Further reading: How do I convert an existing callback API to promises?

Upvotes: 1

Related Questions