LANG SELRCT

コードを書く場所についてはこちら

2019年5月17日金曜日

JavaScriptでPromiseを使ってみる2


Promiseで以下の処理を作った時の備忘録
  1. コンソールに 1 を表示する
  2. promiseオブジェクトを作る
  3. コンソールに 2 を表示する
  4. 2秒後にHelloをresolveに渡す
  5. その後、コンソールに 3 と手順4の Hello に World をつけて表示する



コード.gs
function 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
<!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をログに出す