Google Apps Script Webapp async loading
Question
I am writing a webapp using Google Apps Script.
To reduce loading times I let doGet(e) load a small file with some javascript to asynchronously load other JS and CSS.
Loading external resources works fine of course:
<head>
<!-- loading external resources works fine of course -->
<script src="https://cdnjs.cloudflare.c[...]/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.clou[...].1/jquery-ui.min.css">
</head>
But from what I know this cannot be done with code inside my apps script project because I cannot provide a direct link to the file. That's why I add a little <script> :
function loadScript(filePath) {
google.script.run.withSuccessHandler(function(returnedValueFromGAS) {
$('body').append(returnedValueFromGAS);
}).loadScript(filePath);
loadScript('someScriptFilepath');
loadScript('someStyleFilepath')
}
In this manner I add <script> and <style> tags to my HTML. And I would like to have not one callback for every loaded file, but one callback when all my (script-)files are loaded.
This works fine so far with one major drawback: The Window-Load-Event is not of any use anymore.
How can I load JS and CSS files in the <head> like I would do in other environments so that the load-event still is of use for me?
1 answers
solution1
2 ACCPTED 2019-08-13 09:10:56
And I would like to have not one callback for every loaded file, but one callback when all my (script-)files are loaded.
Issue/Solution:
- The script is calling server functions one by one, instead of one after another(or one inside another). You should nest callbacks('Callback hell') or use promises/async/await.
Snippet:
/**
* Create a promise around old callback api
* @param {String} func The server function to call
* @param {Object} args The arguments to the server function
* @return Promise
*/
const GSR = (func,...args) =>
new Promise((resolve,reject)=>
google.script.run
.withSuccessHandler(resolve)
.withFailureHandler(reject)[func](...args)
);
const bodyAppend = function(returnedValueFromGAS) {
$('body').append(returnedValueFromGAS);
}
//call GSR and append
const GSRa = (func, ...args) =>
GSR(func, ...args)
.then(bodyAppend)
.catch(e=>console.error(e.message));
function loadScriptClient() {//modified
//Can also use async/await here
Promise.all([GSRa('loadScript','someScriptFilepath'), GSRa('loadScript','someStyleFilepath')])
.then(/*All Files loaded and appended at this point; Provide a final callback function here*/)
.catch(e=>console.error(e.message));
}
References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.