Easiest way to wait for google server-side function to resolve

问题

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 cause lines of code that are after the server call to wait.

What I've done:

async function func(){
   await google.script.run.withSuccessHandler(myFunc).serverFunc();
   console.log("done");
}
func();

How can the code wait to execute the console.log line until after the server side function resolves?

回答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.

function myFunc() {
  return "ok";
}

async function func() {
  await new Promise(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:

Class google.script.run
withSuccessHandler(function)
Using Promises

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?

Sample script:

function myFunc(nice) {
  doStuffs(nice);

  return "ok";
}

async function func() {
  const e = await new Promise(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.

回答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>
    <base target="_top">
  </head>
  <body>
    <button onclick="some_Object_Name.innerNameOne()">Run</button>
    
    <div id="idRslt1">Result One</div>
    <div id="idRslt2">Result 2</div>
    <div id="idError">For error</div>
    
    <script>


function callServerAndGetRslt(po) {
  
  /*
    po.fncName - The name of the fnk to run
  
  */
  
  //console.log('po.fncName ' + po.fncName)
  
  return new Promise (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 
    })
}

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

function showResult(toShow) {
  document.getElementById('idRslt1').textContent = toShow;
  
}
function showResult2(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 comma
      function (error) {//Because this is the second function this is what gets called for an error
        showError(error);
        return "There was an error in call 1";
      }
      ).then (function (result) {
        showResult2("end result:" + result);
      });
  }
}

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

GS_Test

function theFirstServerFncCall(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"];
}

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

Code

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

来源：https://stackoverflow.com/questions/58387340/easiest-way-to-wait-for-google-server-side-function-to-resolve

标签

javascript

google-apps-script

web-applications

promise

async-await