Promiseで以下の処理を作った時の備忘録
- コンソールに 1 を表示する
- promiseオブジェクトを作る
- コンソールに 2 を表示する
- 2秒後にHelloをresolveに渡す
- その後、コンソールに 3 と手順4の Hello に World をつけて表示する
コード.gsfunction doGet() { return HtmlService.createHtmlOutputFromFile("index"); } | 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html> <html> <body> <script> run(); function run() { console.log('1'); var promise1 = new Promise(function(resolve, reject) { console.log('2'); setTimeout(function(){ resolve('Hello'); }, 2000); }) promise1.then(function(value) { console.log('3 ' + value + ' world'); }) } </script> </body> </html> | 意訳run()を実行する この機能がやること コンソールにログを出す promise1のpromiseオブジェクトを作成する コンソールにログを出す タイムアウト設定して resolveにHelloを渡す 2秒後に実行する promise1の処理の後 渡されたvalueをログに出す |
index.htmlの中の処理を分けてpromiseを外の関数に渡してみる
index.html
<!DOCTYPE html> <html> <body> <script> run(); function run() { console.log('1'); var promise1 = promise1Function(); promise1.then(function(value) { console.log('3 ' + value + ' world'); } ) } function promise1Function() { var promise1 = new Promise(function(resolve, reject) { console.log('2'); setTimeout(function(){ resolve('Hello'); }, 2000); }) return promise1; } </script> </body> </html> |
意訳run()を実行する この機能がやること コンソールにログを出す promise1Functionのpromiseオブジェクトを取得する promise1Functionのあと、渡された値をvalueで受けて コンソールに出力する この機能がやること promiseオブジェクトを作成して コンソールにログを出す タイムアウト設定して resolveにHelloを渡す 2秒後に実行する promiseオブジェクトを返す |
実行結果
index.htmlのpromise1.thenの中のfunctionの処理を外に書いてみる
index.htmlのpromise1.thenの中のfunctionの処理を外に書いてみる
index.html<!DOCTYPE html> <html> <body> <script> run(); function run() { console.log('1'); var promise1 = promise1Function(); promise1.then(function(value) {promiseThen1(value);} ) } function promise1Function() { console.log('2'); var promise1 = new Promise(function(resolve, reject) { setTimeout(function(){ resolve('Hello'); }, 2000); }) return promise1; } function promiseThen1(value) { console.log('3 ' + value + ' world'); } </script> </body> </html> | 意訳run()を実行する この機能がやること コンソールにログを出す promise1Functionのpromiseオブジェクトを取得する promise1のあと、渡された値をvalueで受けてpromiseThen1に渡す この機能がやること コンソールにログを出す promiseオブジェクトを作成して タイムアウト設定して resolveにHelloを渡す 2秒後に実行する promiseオブジェクトを返す この機能がやること 渡されたvalueをログに出す |
実行結果
参考
Promise.prototype.then()
Promise.prototype.then()
Promise.resolve()