マルチ非同期処理 [1.0.1]

概要

複数の非同期処理を進捗バーを表示しながら実行します。
並列処理も可能です。

head内に追記

<script charset="UTF-8" src="/commons/libraries/vue3/latest/vue.global.prod.js"></script>
<script charset="UTF-8" src="/commons/libraries/vue3-sfc-loader/latest/vue3-sfc-loader.js"></script>

使い方：１つの非同期処理を行う

[html] 
<multi-process ref="refMultiProcess"></multi-process>
<button type="button" @click="singleTask">実行する</button>
[js] 
Vue.createApp({
  setup() {
    const refMultiProcess = Vue.ref(null);

    /**
     * 非同期処理のサンプル
     *  関数名と、引数は別途指定箇所有り
     */
    const sampleAsync = (ms, msg) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.debug([ 'index.js', msg ]);
          resolve(true);
        }, ms);
      });
    };

    /**
     * １つの非同期処理を行う
     */
    const singleTask = async () => {
      const process = [
        [
          {
            func: sampleAsync,      // 実行する関数名
            args: [1000, 'done'],   // 関数に渡す引数
            html: '非同期処理中です' // バーの下に表示するhtml（省略可）
          },
        ],
      ];
      await refMultiProcess.value.execute(process);
      console.log('done');
    };

    return {
      refMultiProcess,
      singleTask,
    };
  },
  components: {
    'multi-process': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./components/multi_process/main.vue', window['Vue3']['loaderOption']() ) ),
  }
});

デモ

使い方：複数の非同期処理を直列で実行する

[html] 
<multi-process ref="refMultiProcess"></multi-process>
<button type="button" @click="seriesProcess">実行する</button>
[js] 
Vue.createApp({
  setup() {
    const refMultiProcess = Vue.ref(null);

    /**
     * 非同期処理のサンプル
     *  関数名と、引数は別途指定箇所有り
     */
    const sampleAsync = (ms, msg) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.debug([ 'index.js', msg ]);
          resolve(true);
        }, ms);
      });
    };

    /**
     * 直列で非同期処理を行う
     */
    const seriesProcess = () => {
      const process = [
        [
          {
            func: sampleAsync,        // 実行する関数名
            args: [2000, '2秒経過'],  // 関数に渡す引数
            html: '非同期処理中です'   // バーの下に表示するhtml（省略可）
          },
          {
            func: sampleAsync,            // 実行する関数名
            args: [1000, '2秒 + 1秒経過'], // 関数に渡す引数
            html: '2つ目処理中です'        // バーの下に表示するhtml（省略可）
          },
        ],
      ];
      refMultiProcess.value.execute(process);
    };

    return {
      refMultiProcess,
      seriesProcess,
    };
  },
  components: {
    'multi-process': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./components/multi_process/main.vue', window['Vue3']['loaderOption']() ) ),
  }
});

デモ

使い方：複数の非同期処理を並列で実行する

[html] 
<multi-process ref="refMultiProcess"></multi-process>
<button type="button" @click="parallelProcess">実行する</button>
[js] 
Vue.createApp({
  setup() {
    const refMultiProcess = Vue.ref(null);

    /**
     * 非同期処理のサンプル
     */
    const sampleAsync = (ms, msg) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.debug([ 'index.js', msg ]);
          resolve(true);
        }, ms);
      });
    };

    /**
     * 並列で非同期処理を行う
     */
    const parallelProcess = async () => {
      const process = [
        [
          {
            func: sampleAsync,        // 実行する関数名
            args: [2000, '2秒経過'],  // 関数に渡す引数
            html: '2秒wait中'         // バーの下に表示するhtml（省略可）
          },
          {
            func: sampleAsync,              // 実行する関数名
            args: [1000, '2秒 + 1秒経過'],  // 関数に渡す引数
            html: '1秒wait中',              // バーの下に表示するhtml（省略可）
          },
        ],
        [
          {
            func: sampleAsync,        // 実行する関数名
            args: [500, '.5秒経過'],  // 関数に渡す引数
            html: '.5秒wait中',       // バーの下に表示するhtml（省略可）
          },
          {
            func: sampleAsync,              // 実行する関数名
            args: [1000, '.5秒 + 1秒経過'], // 関数に渡す引数
            html: '1秒wait中',              // バーの下に表示するhtml（省略可）
          },
          {
            func: sampleAsync,                    // 実行する関数名
            args: [500, '.5秒 + 1秒 + .5秒経過'], // 関数に渡す引数
            html: '.5秒wait中'                    // バーの下に表示するhtml（省略可）
          },
        ],
      ];
      await refMultiProcess.value.execute(process);
      console.log('done');
    };

    return {
      refMultiProcess,
      parallelProcess,
    };
  },
  components: {
    'multi-process': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./components/multi_process/main.vue', window['Vue3']['loaderOption']() ) ),
  }
});

デモ