Quiero implementar una función para cargar dinámicamente los scripts js, si la carga falla, vuelva a intentarlo, el límite de reintentos es tres veces y devuelve el resultado de la carga.
async function getScript(url: string, retryTime = 0, promise?: any) { const element = window.document.createElement('script'); element.src = url; element.type = 'text/javascript'; element.async = true; const p = promise || { resolve: (v: boolean) => { }, reject: (msg: string) => { }, }; element.onload = () => { p.resolve(true); }; element.onerror = () => { const msg = `Dynamic Script Error: ${url}`; if (retryTime < 3) { console.log('retry load'); document.head.removeChild(element); return getScript(url, retryTime + 1, p); } p.reject(msg); }; document.head.appendChild(element); return new Promise((rl, rj) => { p.resolve = rl; p.reject = rj; }); } Pero cuando llamo a esta función, si carga el error en la primera vez y el éxito en la segunda vez. document.head.appendChild(element) generará un error, por lo tanto, no puedo detectar el error en el exterior.
Qué puedo hacer.
Parece demasiado complicado. Aquí hay una solución más limpia y desacoplada:
async function getScript(url) { return new Promise((resolve, reject) => { const element = document.createElement('script'); element.src = url; element.type = 'text/javascript'; element.async = true; element.onload = () => resolve(); element.onerror = () => reject(); document.head.appendChild(element); }); } async function retrying(func, attempts) { for (let attempt = 1; attempt <= attempts; attempt++) { try { return await func(); } catch (ex) { console.warn(`Failed in attempt ${attempt}`); } } throw new Error(`Failed after ${attempts} attempts`); }Uso:
retrying(() => getScript(url), 3);