useScript

异步加载第三方脚本

<template>
  <div>
    <p v-if="isLoading">脚本正在加载中...</p>
    <p v-if="success">脚本加载成功！</p>
    <p v-if="error && isTimeout">脚本加载超时，已重试 {{ getRetryCount() }} 次。</p>
    <p v-if="error && !isTimeout">脚本加载出错，请检查脚本链接或网络状况。</p>
    <button @click="runScriptDependentFunction" :disabled="!success">运行依赖脚本的功能</button>
  </div>
</template>

<script setup lang="ts">
import { useScript } from 'liyao-vue-common';

const { isLoading, error, success, isTimeout } = useScript({
  src: 'https://example.com/your-script.js',
});

const runScriptDependentFunction = () => {
  if (success.value) {
    // 调用脚本中定义的函数
    window.doSomething(); 
  }
};
</script>

顺序加载多个脚本

顺序加载指的是按顺序依次加载脚本，前一个脚本加载完成后再加载下一个脚本。可以使用 async/await 或者 Promise 的链式调用来实现。

import { useScript } from 'liyao-vue-common';

// 定义多个脚本选项
const scriptOptionsList = [
    { src: 'https://example.com/script1.js', timeout: 5000, maxRetries: 3 },
    { src: 'https://example.com/script2.js', timeout: 5000, maxRetries: 3 },
    { src: 'https://example.com/script3.js', timeout: 5000, maxRetries: 3 }
];

// 使用 async/await 实现顺序加载
async function loadScriptsSequentially() {
    for (const options of scriptOptionsList) {
        const { isLoading, error, success, isTimeout } = useScript(options);
        try {
            await new Promise((resolve, reject) => {
                const checkStatus = () => {
                    if (success.value) {
                        resolve();
                    } else if (error.value) {
                        reject(new Error(isTimeout.value ? '脚本加载超时' : '脚本加载出错'));
                    } else {
                        setTimeout(checkStatus, 100);
                    }
                };
                checkStatus();
            });
            console.log(`${options.src} 加载成功`);
        } catch (err) {
            console.error(`${options.src} 加载失败:`, err);
            break; // 若某个脚本加载失败，停止后续脚本的加载
        }
    }
}

// 调用顺序加载函数
loadScriptsSequentially();

并行加载多个脚本

并行加载意味着同时加载多个脚本，这些脚本的加载过程相互独立。可以使用 Promise.all 来实现。

import { useScript } from 'liyao-vue-common';

// 定义多个脚本选项
const scriptOptionsList = [
    { src: 'https://example.com/script1.js', timeout: 5000, maxRetries: 3 },
    { src: 'https://example.com/script2.js', timeout: 5000, maxRetries: 3 },
    { src: 'https://example.com/script3.js', timeout: 5000, maxRetries: 3 }
];

// 并行加载多个脚本
function loadScriptsInParallel() {
    const promises = scriptOptionsList.map(options => {
        const { isLoading, error, success, isTimeout } = useScript(options);
        return new Promise((resolve, reject) => {
            const checkStatus = () => {
                if (success.value) {
                    resolve();
                } else if (error.value) {
                    reject(new Error(isTimeout.value ? '脚本加载超时' : '脚本加载出错'));
                } else {
                    setTimeout(checkStatus, 100);
                }
            };
            checkStatus();
        });
    });

    Promise.all(promises)
      .then(() => {
            console.log('所有脚本加载成功');
        })
      .catch(err => {
            console.error('部分脚本加载失败:', err);
        });
}

// 调用并行加载函数
loadScriptsInParallel();