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()
