マルチ非同期処理 [1.0.2]
概要
複数の非同期処理を進捗バーを表示しながら実行します。
並列処理も可能です。
並列処理も可能です。
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>
使い方:1つの非同期処理を行う
[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);
});
};
/**
* 1つの非同期処理を行う
*/
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']() ) ),
}
});