async awaitのサンプル例~webpack使用~

今までJavascriptのasync / awaitの使い方が不明瞭だったので勉強を兼ねてサンプルを作りました。

今回はオブジェクトが右側に移動し、その後文字が書き換わるように設定しました。

 

サンプルHTML

<div style="overflow: hidden">
  <div class="object">tset</div>
</div>

 

サンプルJS

動作させるオブジェクトを指定

var object = document.querySelector('.object')

 

指定オブジェクトを移動させる関数

  function move() {
    return new Promise((resolve, reject) => {
      var player = object.animate([
        {transform: 'translate(0)'},
        {transform: 'translate(90vw, 0)'}
      ], 1500);
      resolve(player)
    })
  }

 

指定したオブジェクトの終了時の場所を指定する関数

  function finish() {
    return new Promise((resolve, reject) => {
      var moveend = object.style.transform = "translate(90vw, 0)"
      setTimeout(() => {
        resolve(moveend)
      }, 1700)
    })
  }

 

指定したオブジェクトの文字を変更する関数

  function rename() {
    return new Promise((resolve, reject) => {
      resolve(object.innerText='移動が完了')
    })
  }

 

3つの関数を順番に実行させるasyncファンクション

  async function myfuncA() {
    await move()
    await finish()
    await rename()
  }

 

functionを実行

  myfuncA();

 

 

発生したエラー

[regeneratorRuntime is not defined]
このエラーが出た場合、下記の方法で対応が可能でした

@babel/polyfillをインストール

yarn add @babel/polyfill

 

webpack.config.jsのentryに書き加える

entry: ['@babel/polyfill', './js/○○○.js']

このentryは、自分のエントリーファイルに合わせて適宜調整してください