Promise/async・await

Ref

• https://azu.github.io/promises-book/#introduction
• https://ja.javascript.info/

Promise サンプル

/*
 * Promiseはインスタンスを生成した時点で
 * コンストラクタへ渡したコールバックが実行される
 *
 * コメント数字は実行順序
 * promise.thenが3, 4より遅く(非同期に)実行される理由は下記のリンクを参照
 * https://azu.github.io/promises-book/#promise-is-always-async
 */
const promise = new Promise(resolve => {
  console.log('first.');        // ----- (1)
  resolve('done.');
});

console.log('something 1.');    // ----- (2)

/*
 * thenは非同期に実行
 */
promise.then((data) => {
  console.log(data)            // ----- (5)
});

console.log('something 2.')    // ----- (3)
console.log('something 3.')    // ----- (4)

// first.
// something 1.
// something 2.
// something 3.
// done.

then、catchメソッド例

/*
 * 奇数はエラー、偶数は成功
 */
const promise = new Promise((resolve, reject) => {
  randomValue = Math.ceil(Math.random() * 100);
  if (randomValue % 2 === 1) {
    return reject(randomValue);
  }
  resolve(randomValue);
});

/*
 * thenを設定した時点で評価しコールバック実行
 */
promise.then((value) => {
  console.log(`${value} is Success.`);
}).catch(() => {
  console.log(`${value} is Error.`);
});

Promiseの簡単なサンプル2

/*
 * Promiseの例
 * 直列処理で1秒間隔で2回日付を表示し最後にcompleteを出力
 */
function showFirstTime() {
  return new Promise(resolve => {
    window.setTimeout(
      function() {
        console.log("First Time: " + new Date().toString());
        resolve();
      },
      1000);
  });
}

function showSecondTime() {
  return new Promise(resolve => {
    window.setTimeout(
      function() {
        console.log("Second Time" + new Date().toString());
        resolve();
      },
      1000);
  });
}

// ここから実行
showFirstTime().then(showSecondTime).then(()=>{
  console.log('complete');
});

First Time: Sat Aug 19 2017 06:46:55 GMT+0900 (JST)
Second TimeSat Aug 19 2017 06:46:56 GMT+0900 (JST)
complete

Async/Await

/*
 * async/await
 * https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
 * TypeScriptではエラー バージョンの問題か
 */

function resolveAfter1Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 1000);
  });
}

async function add1(x) {
  var a = resolveAfter1Seconds(20);
  var b = resolveAfter1Seconds(30);
  return x + await a + await b;
}

add1(10).then(v => {
  console.log(v); // prints 60 after 1 seconds.
});

async function add2(x) {
  var a = await resolveAfter1Seconds(20);
  var b = await resolveAfter1Seconds(30);
  return x + a + b;
}

add2(20).then(v => {
  console.log(v); // prints 70 after 2 seconds.
});

/*
 * Async/Await
 * 直列処理で1秒間隔で2回日付を表示
 *
 * 別サンプルで下記も参照
 * https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
 */
function nowTime() {
  return new Promise(resolve => {
    window.setTimeout(
      function() {
        console.log("Time: " + new Date().toString());
        resolve();
      },
      1000);
  });
}

async function showTime() {
  await nowTime();
  await nowTime();
}

// ここから実行
showTime();

async/await

function createTimer() {
    return new Promise( (resolve, reject) => {
        setTimeout( () => resolve( 'aaa' ), 3000 )
    } );
}

async function sync() {
    const response = await createTimer();
    console.log(response);
    return 'bbb'
}

sync().then((value) => {
    console.log(value);
})

console.log('zzz');

// zzz
// aaa
// bbb

// ==UserScript==
// @name         Esa link replace
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://h-sawai.docbase.io/posts/*/edit
// @icon         https://www.google.com/s2/favicons?domain=docbase.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let objectToString = Object.prototype.toString;

    const wait = (sec) => {
        return new Promise((resolve, reject) => {
            const intervalId = setInterval(()=> {
                const element = document.querySelector('.CodeMirror-codey');
                if (element !== null) {
                    clearInterval(intervalId);
                    resolve(element);
                }
            }, sec*1000);
      });
    };

    async function main() {
        try {
            const codearea = await wait(1);
            console.log(codearea.innerHTML);
        } catch (err) {
            console.error(err);
        }
    }
     main();
})();