Easiest Way To Wait For Google Server-side Function To Resolve

June 07, 2023 Post a Comment

I need the client side code to wait for the called server side (google.script.run) function to complete before running any more code. The withSuccessHandler(successFunc) does not c

Solution 1:

How about this answer? Please think of this as just one of several answers.

Pattern 1:

In this pattern, after serverFunc was run, myFunc is run. At that time, console.log("done") is run in myFunc.

function myFunc() {
   console.log("done");
}

function func(){
   google.script.run.withSuccessHandler(myFunc).serverFunc();
}

func();

Pattern 2:

In this pattern, Promise was used. When you run func(), you can see ok and done in order.

functionmyFunc() {
  return"ok";
}

asyncfunctionfunc() {
  awaitnewPromise(r => {
    google.script.run.withSuccessHandler(r).serverFunc();
  });
  const res = myFunc();
  console.log(res);
  console.log("done");
}

func();

Note:

If you test above samples, please set the function of serverFunc() at Google Apps Script side.
This is a simple sample script. So please modify this for your actual situation.

References:

If this was not the direction you want, I apologize.

Added:

If you want to use the values from serverFunc at myFunc, how about the following sample script?

Baca Juga

Sample script:

functionmyFunc(nice) {
  doStuffs(nice);

  return"ok";
}

asyncfunctionfunc() {
  const e = awaitnewPromise(r => {
    google.script.run.withSuccessHandler(r).serverFunc();
  });
  const res = myFunc(e);
  console.log(res);
  console.log("done");
}

func();

In this script, the returned value from myFunc can be retrieved by res.

Solution 2:

This code includes error handling and two Promise.then() methods. The example given below is the complete code for an Apps Script Web App, that I used for testing purposes to make sure the that code works. I needed a way to duplicate some client side code that uses fetch().then(), replacing the fetch(url) call to using Apps Script google.script.run.fncName().

H_Index

<!DOCTYPE html><html><head><basetarget="_top"></head><body><buttononclick="some_Object_Name.innerNameOne()">Run</button><divid="idRslt1">Result One</div><divid="idRslt2">Result 2</div><divid="idError">For error</div><script>functioncallServerAndGetRslt(po) {
  
  /*
    po.fncName - The name of the fnk to run
  
  *///console.log('po.fncName ' + po.fncName)returnnewPromise (function (resolve,reject) {
    google.script.run
      .withSuccessHandler (function (result) {
        console.log('result 24' + result)
        resolve (result);//What resolve does is return the result from the server back to the FIRST anonymous function in the "then" part
      })
      .withFailureHandler (function (error) {
        console.log('error: ' + error)
        reject (error);
      })[po.fncName](po);//There can NOT be anything inbetween the array and the ending parenthesis 
    })
}

functionshowError(err) {
  document.getElementById('idError').textContent = err;
  
}

functionshowResult(toShow) {
  document.getElementById('idRslt1').textContent = toShow;
  
}
functionshowResult2(toShow) {
  document.getElementById('idRslt2').textContent = toShow;
  
}

window.some_Object_Name = {

  innerNameOne : function() {
    return callServerAndGetRslt ({"fncName":'theFirstServerFncCall'})
      .then (function (result) {
        console.log('result: 45' + result)
        showResult (result);
      
        return callServerAndGetRslt ({"fncName":'serverFncCall2'});
      },//THERE MUST BE A COMMA HERE!!!!  This is a list of functions seperated by a commafunction (error) {//Because this is the second function this is what gets called for an errorshowError(error);
        return"There was an error in call 1";
      }
      ).then (function (result) {
        showResult2("end result:" + result);
      });
  }
}

  </script></body></html>

GS_Test

functiontheFirstServerFncCall(po) {
  Logger.log('po 1: ' + JSON.stringify(po))
  //throw new Error("err in first fnk");//This is for testing the 
  //error handling on the client side

  return ["name1","name2"];
}

functionserverFncCall2(po) {
  Logger.log('po 2: ' + JSON.stringify(po))
  return[["one","two"]];
}

Code

function doGet() {
  return HtmlService.createHtmlOutputFromFile("H_Index");
}

Solution 3:

Thanks! This also solved my problem with lagged results from server for my dropdown values. Here is my code:

functioncreateDropdowns() {
    
    loaddropdown("Dropdowns!A2:A","ctype");
    loaddropdown("Dropdowns!B2:B","state");
    loaddropdown("Dropdowns!C2:C","city");
    loaddropdown("Dropdowns!D2:D","remedies");
    loaddropdown("Dropdowns!E2:E","keywords");

    }
    asyncfunctionloaddropdown(range,eid) {
    
    const e = awaitnewPromise(r => {
    google.script.run.withSuccessHandler(r).getDropdownList(range);
    }); 
    filldropdown(e,eid);
}

//POPULATE HTML DROPDOWNfunctionfilldropdown(values, elemid) { 
    
    var list = document.getElementById(elemid);   
    for (var i = 0; i < values.length; i++) {
    var option = document.createElement("option");
    option.value = values[i];
    option.text = values[i];
    list.appendChild(option);
    
    }
}

JavaScript Exercises